Question

免责声明：我不是主要的网络开发人员，这是我第一次进入节点，包，npm，umd，webpack和捆绑领域。

我有一个打字和运行良好的打字稿项目，目前配置为输出与webpack兼容的导出。我可以使用下面webpack的{{1}}来成功构建和使用该应用：

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声明的变量的意外令牌的Uglify错误，如下所示：< / p>

var

有问题的行如下：

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时抛出另一个错误。

我没有使用babel或任何插件。在使用转换器等之前，我正试图让基本的webpack在没有任何插件或并发症的情况下工作。

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

Answer 1

你的假设是正确的。因此，webpack不会将您的ES6代码转换为ES5。它＆＃34;工作＆＃34;因为大多数现代浏览器都支持ES6语法。因此，您将在浏览器中检查您的工作，现代浏览器知道如何处理ES6语法。 Uglify并不了解ES6（尽管作者几乎完成了支持ES6的新版本）。因此，您需要通过加载程序运行代码，这会将ES6代码分解为ES5。 babel-loader大部分时间都可以使用，但是我不太了解打字稿，可以为你提供答案。如果您打算将来使用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不喜欢让

1 个答案: