` 意外的令牌 'const'` webpack 和 babel 没有在 WEBPACK VAR INJECTION 部分转译代码

Question

我们有一个使用 react_on_rails 的 Rails 5 项目，因此使用了 webpack（通过 webpacker gem）和 babel。我们正在运行使用 capybara webkit 进行测试，我们在使用 webkit_debug javascript 驱动程序时遇到此错误。

http://localhost:3001/packs-test/kronos-bundle-b399226ff352220cce47.js|80403|SyntaxError: Unexpected token 'const'

我们的生产和测试 webpacks 在包的 WEBPACK VAR INJECTION 部分都有 const 变量，但我认为现代浏览器现在可以使用 let 和 const所以我们没有注意到。

我们的 .babelrc 看起来像：

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "node": "current",
          "browsers": ["last 2 versions", "safari >= 7"],
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "es2015",
    "react",
    "stage-1"
  ],
  "plugins": [
    "transform-flow-strip-types",
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

有什么想法吗？

Answer 1

原来这里有两个问题困扰着我。首先，有两个我们使用的模块没有被转换，所以我不得不在 webpack 中为它们添加显式包含以将它们传递给 babel-loader:

  {
    test: /\.jsx?$/,
    include: [path.resolve(__dirname, '../../node_modules/')],
    use: [
      {
        loader: 'babel-loader',
        options: {
          cacheDirectory: 'tmp/cache/webpacker/babel-loader'
        }
      }
    ]
  }

一旦我这样做了，我发现 webpack 和 poltergeist 都需要更多的转换才能达到通用的 ES5。为此，我们需要将 es5-shim 添加到我们的入口点。我选择通过修改我们的 /config/webpack/test.js 文件来做到这一点：

const environment = require('./environment');

const config = environment.toWebpackConfig();

const entry = config.entry['kronos-bundle'];

config.entry = {
  'kronos-bundle': ['es5-shim/es5-shim', 'babel-polyfill', entry]
};

module.exports = config;

不确定是否有更好的方法来加载该 ployfill，但现在可以了。

` 意外的令牌 'const'` webpack 和 babel 没有在 WEBPACK VAR INJECTION 部分转译代码

` Unexpected token 'const'` webpack and babel not transpiling code in WEBPACK VAR INJECTION section

webpack

babeljs

webpacker

react-on-rails