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

ProvidePlugin:自動加載模塊,而沒必要處處 import 或 require 。(點擊查看官方文檔)vue

使用方法:webpack

配置 webpack.config.js文件裏 plugins 屬性web

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

示例用法:json

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

配置完之後就能夠在代碼裏直接使用 _ ,而再也不須要 import瀏覽器

 注意:(若是不配置eslint,瀏覽器就會報錯:'_' is not defined no-undef)ide

 配置 package.json 裏 eslintConfig 屬性(或者在.eslintrc.js文件裏進行配置 全局變量 globals)ui

"eslintConfig": {
  "globals": {
    "_": true,
    // ...etc.
    // 注意package.json裏不容許註釋
  }
}

 

對於 ES2015 模塊的 default export,你必須指定模塊的 default 屬性:spa

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

示例:eslint

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
});
相關文章
相關標籤/搜索