如何使用webpack插件ProvidePlugin

首先来看一个场景: 现在一个vue项目中，我有很多文件都需要引入 lodash 库，现在主要有三种方式。

第一种：每个文件单独引入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';

这样做有以下几个弊端

• 重复引入，非常麻烦
• import 进来之后的自定义名称可能会不统一，导致全局搜索困难

// a.js
import $_ from 'lodash';
// b.js
import _ from 'lodash';

第二种：在Vue.ptototye挂载 lodash

import lodash from 'lodash'
Vue.prototype.$_ = lodash

在使用的时候，直接通过this.$_获得对lodash的引用。但是这样有个坏处， 如果我们在 Vue.prototype上绑定了太多，太大的第三方库，会导致root vue过大。

第三种： ProvidePlugin

这个插件是 webpack 本身提供的，它的定义是：自动加载模块，而不必到处 import 或 require 。ProvidePlugin 有三种使用方式:

直接引入

new webpack.ProvidePlugin({
  $_: 'lodash',
});

引入某个函数

new webpack.ProvidePlugin({
  _map: ['lodash', 'map']
})

export default

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
})

在vue项目中的实践

首先，在 webpack 的 plugins 中增加 $_ 的配置:

plugins: [
    new webpack.ProvidePlugin({
      $_: 'lodash',
    }),
],

其次，eslint 的 globals 增加 $_ 的配置

globals: {
    $_ : 'readonly', // 或者true
},

配置为readonly是因为我们不会改写lodash，仅仅是调用其方法。