Open FrankKai opened 4 years ago
// 语法
new webpack.ProvidePlugin({
identifier: 'module1',
// identifier: ['module1', 'property1'],
});
new webpack.ProvidePlugin({
$_: 'lodash',
});
new webpack.ProvidePlugin({
$_uniqBy: ['lodash','uniqBy']
});
new webpack.ProvidePlugin({
Vue: ['vue/dist/vue.esm.js', 'default']
});
加入我们有a~z,a.js到z.js总结26个js文件,每个文件都需要引入lodash。
// a.js
import $_ from 'lodash';
// b.js
import $_ from 'lodash';
// c.js
import $_ from 'lodash';
// d.js
import $_ from 'lodash';
// e.js
import $_ from 'lodash';
// f.js
import $_ from 'lodash';
...
// z.js
import $_ from 'lodash';
这样做有以下几个弊端
比如说下面这种场景,对于代码可读性是很不好的。
// a.js
import $_ from 'lodash';
// b.js
import _ from 'lodash';
// webpack.base.config.js
plugins: [
new webpack.ProvidePlugin({
$_: 'lodash',
}),
],
// .eslintrc.js
globals: {
$_: 'readonly', // 或者true
},
配置为readonly是因为我们不会改写lodash,仅仅是调用其方法。
假设在a.js中。 删除单独的lodash引入 :~~import from 'lodash'~~ script中直接使用$ :`$.uniqBy(...)` template的使用事项可以看下文。
ProvidePlugin注入的全局变量,在script中是完全没有问题的,但是在template中使用时会有一些小问题。
例如下面这样:
<p>{{$_(...)}</p>
data() {
return {
$_,
}
}
遇到这种情况是什么原因呢? Vue的模板语法中,不支持直接对以$或者_开头的自定义data属性,目的是避免与Vue的内部冲突。
[Vue warn]:
Property "$_" must be accessed with "$data.$_".
Because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals
有以下几种方式解决这个问题:
$data.$_
访问$data.$_
访问<p>{{$data.$_(...)}</p>
<p>{{globalLodash(...)}</p>
data() {
return {
globalLodash: $_,
}
}
<p>{{$_(...)}</p>
methods: {
$_
}
这是因为ProvidePlugin最终返回给我们的,是一个hooks函数。
hooks () {
return hookCallback.apply(null, arguments);
}
既然是一个函数,那么它其实就是一个method。 由于需要在vue的template中使用,所以需要将其挂载到vue实例上。 因此直接在methods中绑定,挂载到vue示例。
避免额外的无用的开销。 这是因为data是用来定义一些响应式的数据的,我们的$_只是一个工具函数,不会有双向绑定的事情发生在它身上,因此也不需要定义在data中,vue不用为其定义单独的watcher,dep,getter,setter等等。
是一个hooks函数。
hooks () {
return hookCallback.apply(null, arguments);
}
不会。 反而会略微增大一些,0.0X KB。 这是我自己对比使用ProvidePlugin前和使用ProvidePlugin后打包文件体积大小得出的结论。
这些注意事项其实主要是为了增强代码可读性和可维护性。
看到这里,文章开头Vue.prototype.xxx
和import和require重复引入的问题”有没有更加优雅的实现方式?“就迎刃而解啦。
快到你的项目中试试ProvidePlugin吧~
现代化前端的全局引入是一个很有趣的东西。 先来看下以下几个场景:
resolve: { alias: { '@': path.join(__dirname, '..', 'src') }}
。Vue.prototype.$_ = lodash
,在应用了vue的应用上下文中,可以通过this.$_获得对lodash的引用。来思考一个问题:
有没有更加优雅的解决办法?
再来思考一个问题:
有没有更加优雅的实现方式?
看一张一直引入moment,引了99次的图先来感受一下:
虽然我的项目中是在优化moment的引入,但是为了直观明了,我将以引入lodash为例。