Webpack 不包括 ProvidePlugins答案

【问题标题】：Webpack not including ProvidePluginsWebpack 不包括 ProvidePlugins
【发布时间】：2016-09-01 19:23:21
【问题描述】：

我正在开发一个使用 vue webpack 模板 (https://github.com/vuejs-templates/webpack) 的小型试用 Web 应用程序。我对 webpack 很陌生，所以我假设我可以在插件中添加一个 new webpack.ProvidePlugin 并且它将在全球范围内可用，但是当我执行 npm run dev 时，我收到以下错误：

/var/www/public/leadsStatsDashboard/liveleadstats/src/components/Hello.vue
  18:17  error  'd3' is not defined  no-undef

在我看来，它找不到 d3 参考。我不确定是否有一些我跳过的配置或什么，但任何帮助将不胜感激。这是我的文件的来源

Webpack.dev.conf.js：

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var projectRoot = path.resolve(__dirname, '../')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      d3: 'd3',
      crossfilter: 'crossfilter',
      dc: 'dc'
    })
  ],
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    publicPath: config.build.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'd3': path.resolve(__dirname, '../bower_components/d3/d3.min.js'),
      'crossfilter': path.resolve(__dirname, '../bower_components/crossfilter/crossfilter.min.js'),
      'dc': path.resolve(__dirname, '../bower_components/dcjs/dc.js')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders()
  }
}

你好.vue

<template>
<div id="pieChartContainer">
</div>
</template>

<script>
    export default {
        data () {
           return {
           // note: changing this line won't causes changes
           // with hot-reload because the reloaded component
           // preserves its current state and we are modifying
           // its initial state.
           msg: 'Hello World! This is a test'
        }
     },
     ready () {
     console.log(d3.version)
     }
  }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   h1 {
    color: #42b983;
   }
 </style>

【问题讨论】：

你的 NPM 安装中不需要 d3。

标签： node.js d3.js webpack vue.js

【解决方案1】：

您的错误不是从 webpack 发出的，而是来自 eslint。
事实上，我认为 webpack 部分可以正常工作！

no-undef 抱怨您使用全局 d3 而不在某处导入或定义它。

好消息是，这很容易解决。使用以下三种可能性中的任何一种：

只需将以下块添加到您的.eslintrc.js：
```
"globals": {
  "d3": true
}
```
...或在需要 d3 的文件中使用 eslint cmets 隐式（但这没有多大意义，因为您使其全局可用，并且您需要在您希望使用全局的每个文件中执行此操作变量）：
```
/* eslint-disable no-undef */
```
...或者您可以放松 .eslintrc.js 配置中的 eslint 规则：
```
'rules': {
    // all other rules...
    'no-undef': 0
}
```

其他链接：

【讨论】：

谢谢！我是整个 webpack 和 eslint 想法的新手，所以你对我很有帮助。