Question

我正在使用一个小型试用版Web应用程序，它使用vue 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()
  }
}

Hello.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>

Answer 1

您的错误不是从网络包发出的，而是来自eslint 我认为webpack部分实际上应该正常工作！

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

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

只需将以下块添加到.eslintrc.js：
即可
```
"globals": {
  "d3": true
}
```
...或者在隐含地需要d3的文件中使用eslint注释（但是当你在全局范围内使用它时没有多大意义，你需要在每个文件中都这样做你希望使用全局var的文件：
```
/* eslint-disable no-undef */
```
...或者您可以放松.eslintrc.js配置中的eslint规则：
```
'rules': {
    // all other rules...
    'no-undef': 0
}
```

其他链接：

Webpack不包括ProvidePlugins

1 个答案: