尽管预设了 ES2015，Webpack 仍输出 ES6 代码答案

【问题标题】：Webpack outputting ES6 code despite ES2015 preset尽管预设了 ES2015，Webpack 仍输出 ES6 代码
【发布时间】：2018-02-10 12:11:59
【问题描述】：

我正在使用 ES6 synthax 编写客户端反应代码，并且一直在使用 webpack 使用 Babel 转换为 ES5，并生成我发送到浏览器的包。

它在 Chrome 上运行良好。但是，我最近在 Safari 9.x 上尝试了我的捆绑包，但失败了： SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode. 经过仔细检查，我注意到 bundle.js 中的这段代码导致了错误：

// customized for this use-case
const isObject = x =>
    typeof x === 'object' &&
    x !== null &&
    !(x instanceof RegExp) &&
    !(x instanceof Error) &&
    !(x instanceof Date);

我认为 webpack 应该消除 ES6 代码（因为我使用的是 es2015 预设）所以我很惊讶 const 和箭头函数仍在捆绑包中。 为什么我的包中还有 ES6 代码？我有什么办法让 webpack 将其转换为 ES5？

这是我的 webpack.config.js 的 sn-p，我认为它可以完成删除此合成器的工作，但没有：

module: {
  loaders: [{
    test: /\.jsx?/,
    include: APP_DIR,
    loader: 'babel-loader',
    query: {
      presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
    }
  }

【问题讨论】：

你的测试有 '?'而不是'$'。也许试试这个测试： test: /\.jsx$/,
试一试：/\.jsx?$/,
@Imran 我不认为这是我编写的函数，它必须是库或 webpack。 @Niels 我有 ? 允许 webpack 处理 .js 和 .jsx 文件
我刚刚做了/\.jsx?$/，但似乎没有什么不同
该代码在哪个文件中？您的代码仅编译 APP_DIR 中的内容，该文件夹中的文件是什么？你是如何计算APP_DIR的？

标签： javascript webpack ecmascript-6 babeljs

【解决方案1】：

经过多次摸索和调查，结果发现一个节点模块snakecase-keys 是使用ES6 合成器构建的。因为我的 webpack 只针对我的静态目录而不是我的节点模块，所以它没有得到 Babel'd

这解决了它：

module: {
      loaders: [{
        test: /\.jsx?/,
        // exclude: /(node_modules|bower_components)/,
        include: [APP_DIR, /node_modules\/snakecase-keys/],
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
        }
      }]
}

【讨论】：