Webpack 不包括 ProvidePlugins

我正在开发一个小型试用 Web 应用程序，它使用 vue webpack 模板（https://github.com/vuejs-templates/webpack https://github.com/vuejs-templates/webpack）。我对 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>

您的错误不是从 webpack 发出的，而是从eslint http://eslint.org/.
事实上，我认为 webpack 部分可以正常工作！

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

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

• 只需将以下块添加到您的.eslintrc.js:

  "globals": {
    "d3": true
  }
  

• ...或者在需要的文件中使用 eslint 注释d3隐式（但这没有多大意义，因为您将其设置为全局可用，并且您需要在希望使用全局变量的每个文件中执行此操作）：

  /* eslint-disable no-undef */
  

• ...或者你可以放宽 eslint 规则.eslintrc.js config:

  'rules': {
      // all other rules...
      'no-undef': 0
  }
  

附加链接：

• 直接链接到模板的 eslintrc 文件 https://github.com/vuejs-templates/webpack/blob/master/template/.eslintrc.js
• 模板扩展的 eslint “标准”文件 https://github.com/feross/eslint-config-standard/blob/master/eslintrc.json
• 进一步阅读 eslint 的内容no-undef rule http://eslint.org/docs/rules/no-undef