3

指定されたターゲットブラウザのリストに関して、ポリフィルを自動的に挿入するようにbabel preset-envを構成しようとしています。

ドキュメントにはpreset-env、の形式のプロパティを使用してプリセットを構成すると、"useBuiltIns": "usage"まさにこれが行われると記載されています。

(このプロパティだけを指定するとコンソールに警告が表示されることに気付きましたが、使用するコア js バージョンを指定する必要があるため、これも追加しました。)

したがって、私のbabel.config.jsは次のようになります。

module.exports = {
  "presets": [
    "@babel/preset-react",
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": ['macros'],
};

素晴らしい！これは簡単なはずです！

ただし、webpack で再コンパイルすると、私のアプリはブラウザーで停止し、次のコンソール メッセージが表示されます。

Uncaught TypeError: __webpack_require__(...) is not a function
at Module../node_modules/webpack/buildin/harmony-module.js (harmony-module.js:24)

私はいくつかの調査を行いました（約3時間の価値しかありません！）これは、babelがbabelをトランスパイルしようとした結果、またはそのようなものであると理解しています...無視のリストにいくつかのファイルを追加する必要がありますおそらく、トランスパイルされたり、二重にトランスパイルされたりすることはありません。

私のwebpack構成では、次のものを入れました。(除外エントリに注意してください)。

module: {
  rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: [/core-js/, /regenerator-runtime/],
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: babelConfig.presets,
            cacheDirectory: babelCacheDir
          }
        },
        'eslint-loader'
      ]
    }
  ]
}

また、無視パターンにいくつかのバリエーションを追加しようとしましたが、それでも致命的なコンソール エラーが発生します。

私が試したもう1つのことは、node_modulesフォルダーを無視することですが、まったく変換されていないコードの大きな塊があります。つまり、IE11 では、トランスピルされていないベンダー スクリプトに由来する ES6 アロー関数に関する構文エラーが発生します。

が望ましくない方法で変更されている理由を誰かが説明できる場合は__webpack_require__、この問題に必要な正確な解決策が研究に非常に抵抗しているため、私は非常に感謝しています.

編集:以下は、 babelを無視するようにする必要があることを示唆していますがcore-js、これは非常に合理的です。babel 設定ファイルで以下を使用することを提案します。

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

ただし、これにより、別のかなり、一見非特異的なエラーが発生します。

has.js:4 Uncaught TypeError: Cannot convert undefined or null to object
    at hasOwnProperty (<anonymous>)
    at push../node_modules/core-js/internals/has.js.module.exports (has.js:4)
4

2 に答える 2