node.js - Webpack 不包括 ProvidePlugins

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()
  }
}

你好.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

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

no-undef 提示您正在使用全局 d3 而没有在某处导入或定义它。

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

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

  "globals": {
    "d3": true
  }
  

• ...或在隐式要求 d3 的文件中使用 eslint 注释(但这没有多大意义，因为您使其在全局范围内可用，并且您需要在您希望使用全局变量的每个文件):

  /* eslint-disable no-undef */
  

• ...或者您可以放宽 .eslintrc.js 配置中的 eslint 规则:

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

附加链接:

• Direct link to the template's eslintrc file
• The eslint 'standard' file the template extends
• Further reading on eslint's no-undef rule