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

时间:2018-01-18 18:01:12

标签: webpack babel webpacker react-on-rails

我们有一个使用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'

我们的生产和测试网络包都在const部分的WEBPACK VAR INJECTION部分中有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 } ] ] } 看起来像是:

DateTime dt = DateTime.Today;
DateTime dt1 = new DateTime(dt.Year, dt.Month, dt.Day, 6, 0, 0);
DateTime dt2 = new DateTime(dt.Year, dt.Month, dt.Day, 20, 0, 0);
Console.WriteLine(DateTime.Now > dt1 && DateTime.Now<dt2);

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

原来有两个问题在咬我。首先,有两个我们正在使用的模块,我们没有被转换,所以我不得不在webpack中添加explict包含它们以将它们传递给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但现在可以正常工作。