Webpack 2.0 检查是否存在 tree shaking ES6 模块导入

Question

在 Webpack 2.0 (@2.1.0-beta6) 中，如果我要导入一个指向不存在的文件的文件，则会出现构建时错误。

//x.js
import { foo } from './y'

//y.js
export function foo () { return 5 }

如果我从存在的文件导入不存在的导出，我会收到运行时错误。

//x.js
import { baz } from './y'

//y.js
export function foo () { return 5 }

有没有办法让 Webpack 像解析文件一样检查导出？

//webpack.config.js
module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015-native-modules']
        }
    ],
  }
}

Answer 1

我相信在这种情况下运行时间错误是正确的行为。您可能不会从导入本身得到运行time 错误，但只有当您尝试使用它时它才未定义。

一个文件是否存在可以很容易地在构建时通过系统调用来确定。然而，导出给定值或不导出给定值的模块可以在运行时间更改——这不是一个好主意——因此 Webpack 不会在构建时决定是否应该退出。

考虑以下代码：

// hats.js
var hats = undefined;
if (Math.random() > 0.5) {
  hats = 'i have a hat!';
}
export const HATS = hats;
// index.js
import { HATS } from './hats';
console.log('hats is:', HATS}

Webpack 在构建时无法知道 HATS 是否会在运行时存在，因此当我尝试导入帽子时它不会出错。但是，在执行期间记录时，HATS 将正确地为未定义或 'i have a hat!'。类似地，如果我从 hats.js 中删除导出行，它只会总是报告未定义，因为 Webpack 无法在转译后区分它们 - HATS 仍然只是未定义。如果我完全删除 hats.js，Webpack 就会知道肯定有问题并会出错。

Answer 2

自 webpack@2.1-beta15 起，warnings have now been added 用于导入 ES6 导出。

Webpack 2.0 检查是否存在 tree shaking ES6 模块导入

Webpack 2.0 checking existence of tree shaken ES6 module imports

ecmascript-6

webpack

es6-module-loader