阅读 407

webpack 插件 ProvidePlugin 的使用方法和 eslint 配置

ProvidePlugin:自动加载模块,而不必到处 import 或 require 。点击查看官方文档

使用方法:

配置 webpack.config.js 文件里 plugins 属性

new webpack.ProvidePlugin({
  identifier: 'module-name'
  // ...etc
});
复制代码

示例用法:

new webpack.ProvidePlugin({
  _: 'lodash'
});
复制代码

配置完以后就可以在代码里直接使用 _,而不再需要 import 了。

注意:(如果不配置 eslint,浏览器就会报错:_ is not defined no-undef)

配置 ESLint 解决报错:

配置 package.jsoneslintConfig 属性(或者在 .eslintrc.js 文件里进行配置 全局变量 globals

"eslintConfig": {
  "globals": {
    "_": true,
    // ...etc.
    // 注意package.json里不允许注释
  }
}
复制代码

针对 ES6 模块化 配置

对于 ES2015 模块的 default export,你必须指定模块的 default 属性:

语法:

new webpack.ProvidePlugin({
  identifier: ['module-name', 'property']
  // ...etc.
});
复制代码

示例:

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
});
复制代码
文章分类
前端
文章标签