vue(typescript)全局引入lodash

全局引入lodash  ProvidePlugin是Webpack用来自动加载模块的方法，全局使用方式可以避免每个vue组件中都import lodash。

npm i  lodash --s // 安装lodash

1、webpack.base.conf.js

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js',

login: './src/login.js',

vendor: 'lodash', // 多个页面所需的公共库文件，防止重复打包带入

},

.........

在webpack.dev.conf.js文件中的plugins增加(有试过直接在webpack.base.conf.js中添加，但是加完之后就报错了)：

//全局引入lodash ProvidePlugin是webpack的内置模块，使用ProvidePlugin加载的模块在使用时将不再需要import和require进行引入

new webpack.ProvidePlugin({

_: 'lodash'

})

若是使用js那么按以上配置就可以全局使用了，若使用的是typescript,则还要继续配置

在src目录下的shims-vue.d.ts中添加

import * as lodash from 'lodash';

declare global { // 全局变量设置

     const _: typeof lodash

}

若不加上面的配置会报错：

TS2686: '_' refers to a UMD global, but the current file is a module. Consider adding an import instead.

至于shims-vue.d.ts是啥，使用了ts就造了