现代化前端的全局引入 —— ProvidePlugin

在Vue项目中，为了使用import一直引入造成不必要工作量，且import进来之后的自定义名称可能会不统一，导致全局搜索困难，我们可以使用ProvidePlugin引入实践，增强代码可读性和可维护性

1、webpack的plugins中增加$_的配置

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

eslint的globals增加$_的配置

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

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

2、在Vue中使用

在 vue.config.js 文件中：

const path = require('path');
const webpack = require('webpack')

module.exports = {
    configureWebpack: {
		resolve: {
			alias: {
				'@': resolve('src'),
				xxx$: path.resolve(__dirname, "./xxx_1.0.0.min.js")
			}
		},
		plugins: [
          new webpack.ProvidePlugin({
            xxx: 'xxx'
          })
        ],
	},
}

使用

<script>

    let { commonUtils, modelUtils } = xxx

</script>

3、在Vue的template中使用的注意事项

ProvidePlugin注入的全局变量，在script中是完全没有问题的，但是在template中，Vue的模板语法中，不支持直接对以$或者_开头的自定义data属性，目的是避免与Vue的内部冲突

解决方式：

1. 通过$data.$_访问

<p>{{$data.$_(...)}</p>

2. data中重命名后绑定

<p>{{globalLodash(...)}</p>

data() {
    return {
          globalLodash: $_,
    }
}

3. methods中绑定(最推荐)

因为ProvidePlugin最终返回给我们的，是一个hooks函数，既然是一个函数，那么它其实就是一个method。由于需要在vue的template中使用，所以需要将其挂载到vue实例上。因此直接在methods中绑定，挂载到vue示例。

<p>{{$_(...)}</p>

methods: {
    $_
}

 

参考资料：

实用webpack插件之ProvidePlugin