生产模式下的 webpack 不喜欢 let

Question

免责声明：我主要不是网络开发人员，这是我第一次涉足节点、包、npm、umd、webpack 和捆绑的世界。

我有一个构建和运行良好的打字稿项目，当前配置为输出与 webpack 兼容的导出。我可以使用webpack 和下面的webpack.config.js 来成功构建和使用该应用程序就好了：

var path = require('path');

module.exports = {
    // entry: './scripts/stats.js',
    entry: './scripts/app.js',
    output: {
        // library: 'stats',
        path: path.resolve(__dirname, 'dist'),
        filename: 'stats.bundle.js'
    },
    node: {
      fs: 'empty'
    }
}

但是，如果我尝试使用 webpack -p 构建捆绑包，则会收到关于使用 let 而不是 var 声明的变量的意外标记的 Uglify 错误，如下所示：

ERROR in stats.bundle.js from UglifyJs
Unexpected token: name (results) [stats.bundle.js:47151,8]

有问题的行如下：

47149 function SelectNodes(filter) {                                                                                                                                  
47150     var nodes = [];                                                                                                                                          
47151     let results = document.querySelectorAll(filter);                                                                                                         
47152     for (let i = 0; i < results.length; ++i) {                                                                                                               
47153         nodes.push(results[i]);                                                                                                                              
47154     }                                                                                                                                                        
47155     return nodes;                                                                                                                                            
47156 }                               

将let 替换为var 可以让事情顺利进行；但是在下次使用 let 时会引发另一个错误。

我没有使用 babel 或任何插件。在使用转译器等之前，我正在尝试让基本的 webpack 工作而没有任何插件或并发症。

我推测这是一个问题，生产模式下的 webpack 不支持与常规模式下的 webpack 相同的 ES 标准，但我不确定为什么会有这样的差异。 （这是我使用所有 JS 工具的经验，构建工具链的质量无处不在，一切都在进行中，没有什么是标准化的。）

Answer 1

你的假设是正确的。所以 webpack 不会将你的 ES6 代码转换为 ES5。它在开发中“有效”，因为大多数现代浏览器都支持 ES6 语法。所以你去浏览器检查你的工作，你的现代浏览器知道如何处理 ES6 语法。 Uglify 不理解 ES6（尽管作者几乎完成了支持 ES6 的新版本）。所以你需要通过一个加载器来运行你的代码，它将你的 ES6 代码分解为 ES5。大多数时候 babel-loader 都可以工作，但我对 typescript 的了解还不够，无法为您提供答案。如果您计划在未来更多地使用 webpack 自定义配置，我推荐 https://survivejs.com/webpack/preface/。这是我为深入 webpack 世界找到的最全面的资源；可能是因为它是由 webpacks 核心贡献者之一维护的。

检查https://github.com/babel/babel-loader

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}