webpack 插件 ProvidePlugin 的使用方法和 eslint 配置_淋雪_前端开发者

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

ProvidePluginimportrequire(点击查看官方文档)(点击查看官方文档)(点击查看官方文档)

使用方法:

使用方法:

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

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

new webpack.ProvidePlugin({
  identifier: 'module-name',
  // ...etc
});
new webpack.ProvidePlugin({
  identifier: 'module-name',
  // ...etc
});

new webpack.ProvidePlugin({
identifier:
,
// …etc

示例用法:

示例用法:

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

new webpack.ProvidePlugin({

});

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

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

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

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

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

配置 package.json 里 eslintConfig 属性配置 package.json 里 eslintConfig 属性

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

: {
: {
true,
// …etc.// 注意package.json里不允许注释 }
}

 

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

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

new webpack.ProvidePlugin({
identifier: [
],
// …etc.

示例:

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

new webpack.ProvidePlugin({
vue: [
]
});

 

» 本文来自:前端开发者 » 《webpack 插件 ProvidePlugin 的使用方法和 eslint 配置_淋雪_前端开发者》
» 本文链接地址:https://www.rokub.com/73663.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!