web-dev-qa-db-ja.com

ベンダーバンドルでバベルの `useBuiltIns： 'usage'`オプションを使用するにはどうすればよいですか？

IE11もサポートする必要があるため、node_modulesもトランスパイルする必要があります。

これは、node_modulesで使用するbabel構成です。

presets: [
  ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],

エラーSymbol is not definedが発生したため、useBuiltInsオプションを使用しましたが、ポリフィルが必要でした。

ただし、この構成はコンパイル時に壊れます。おそらくコードにimportsが挿入されているためです。ここにエラーがあります。

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

基本的には、module.exportsを好みません。では、ベンダーバンドルでuseBuiltInsを使用するにはどうすればよいですか？

今のところ、index.htmlにバベルポリフィルを常に必要とすることで解決しましたが、これは理想的ではありません。

internet-explorerbabeljspolyfillsbabel-polyfill
15
Pontiacks

デフォルトでは、Babelは、処理するファイルがESモジュールであると想定します（importおよびexportを使用）。 node_modules（CommonJSモジュールの可能性が高い）でBabelを実行している場合は、すべてのnode_modulesをスクリプトとして処理するようにBabelに指示するか、Babelに基づいてタイプを推測するように指示する必要がありますimportおよびexportの存在。推測が最も簡単なので、追加できます

sourceType: "unambiguous"

また、core-js自体に対してusage変換を実行しないようにBabelに指示します。

  ignore: [
    /\/core-js/,
  ],

それ以外の場合、usage変換は実際にcore-jsへの参照をitselfに挿入し、依存サイクルを引き起こします。

したがって、トップレベルのBabel構成では、次のようにします。

{
  ignore: [
    /\/core-js/,
  ],
  sourceType: "unambiguous",
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
}

それについてさらに具体的にしたい場合は、

{
  ignore: [
    /\/core-js/,
  ],
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
  overrides: [{
    test: "./node_modules",
    sourceType: "unambiguous",
  }],
}

node_modules内のファイルにフラグを設定するだけですが、そうすることで得られるものはほとんどありません。

whyについては、このエラーが修正されます。問題は、BabelがESモジュールであると考える場合、importステートメントを挿入することです。 importステートメントをmodule.exportsのようなCommonJSのものも使用するファイルに挿入すると、ファイルは両方のモジュールシステムを同じファイルで使用することになります。これは大きな問題であり、エラーの原因になりますあなたが見ています。

3
loganfsmyth