生产模式下的 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。它 "works" 正在开发中，因为大多数现代浏览器都支持 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']
        }
      }
    }
  ]
}

生产模式下的 webpack 不喜欢 let

webpack in production mode doesn't like let

webpack

webpack-2