0

react_on_rails を使用する Rails 5 プロジェクトがあるため、webpack (webpacker gem を介して) と babel を使用します。カピバラ webkit を使用してテストを実行していますが、webkit_debug javascript ドライバーを使用すると、このエラーが発生します。

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

本番用とテスト用の両方の webpackには、パックconstのセクションに変数がありますが、最新のブラウザーは問題ないとWEBPACK VAR INJECTION思いますので、まだ気づいていません。letconst

私たち.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
      }
    ]
  ]
}

何か案は？

4

1 に答える 1

0

ここには、私を悩ませていた 2 つの問題がありました。まず、変換されていない 2 つのモジュールを使用していたため、webpack に明示的なインクルードを追加して、babel-loader に渡す必要がありました。

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

それを行った後、一般的な ES5 にするには、webpack とポルターガイストの両方をさらに変換する必要があることがわかりました。これを行うには、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 をロードするためのより良い方法があるかどうかはわかりませんが、これで機能するようになりました。

于 2018-01-19T14:27:14.440 に答える