javascript - webpack 有没有办法知道全局是否未声明？

Question

我正在使用一些外部组件(google 的 js 就是其中之一)，并且我在文件顶部有 'use strict' 语句。我知道我可以使用 webpack 的解析配置参数来伪造导入，但这只允许我导入不属于源代码的模块。

我想要一个未“导入”或类似的全局变量，在 webpack 处理时会抛出错误。

举个例子:

var foo = bar

我希望 bar(未声明或导入)会出现 'use strict' 错误。

我使用的是 webpack 1.13.1

Answer 1

您可以在 ESLint 的帮助下防止使用 undefined variable 构建包和 no-undef rule .

为此解决方案准备软件包

npm install eslint eslint-loader eslint-friendly-formatter --save-dev

您应该配置.eslintrc

{
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "rules": {
        "no-undef": 2 // <-- ERROR on not defined variables
    }
}

在您的 webpack.config.js 中，您必须添加此行以支持使用 ESLint 进行 linting

module.exports = {
    loaders: [
        {
            test: /\.js$/,
            loader: 'eslint-loader',
            exclude: /(node_modules|bower_components)/
        },
        // ...
    ],
    eslint: {
        failOnError: true, // block build on non passed linting
        configFile: '.eslintrc', // path to your .eslintrc
        formatter: require('eslint-friendly-formatter') // better error report
    },
    // ...
};

这个配置给你带来了这种错误

ERROR in ./src/example.js
Module build failed: Error: Module failed because of a eslint error.

  ✘  http://eslint.org/docs/rules/no-undef  'bar' is not defined
  /yourpath/src/example.js:2:11
  var foo = bar;
             ^


✘ 1 problem (1 error, 0 warnings)