[解決済み】@babel/envと@babel/preset-envの間でbabelのプリセット設定を混乱させる。

質問

babelとwebpackでjavascriptを開発するための環境を構築しようとしています。

しかし、私はbabelの設定について理解していません。 presets .

で ご利用ガイド というプリセットがあることがわかります。 "@babel/env" .

しかし、ドキュメント内の他の場所では、このような構成は見当たりません。 "@babel/preset-env" 例えば、こんな感じです。 https://babeljs.io/docs/en/babel-preset-env

との違いがわかりません。 "@babel/env" と "@babel/preset-env" 私の拙い英語で、本当に何度も何度もドキュメントを読んでいるのですが、うまくいきません。

もしかしたら同じかも？

ターゲットセットは機能しないようです。ターゲットを削除すると、ie9+でも正常に動作します（デフォルトのターゲットも同様）。

以下は私のプロジェクトです。 sdk-dev-env

// https://babeljs.io/docs/en/configuration
const presets = [
  [
    '@babel/env',
    {
      // https://babeljs.io/docs/en/babel-preset-env#targets
      // TODO: how to compatibilite with ie 8
      targets: {
        ie: '8',
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1'
        /**
         * you can also set browsers in package.json
         * "browserslist": ["last 3 versions"]
         * relative links:
         * https://github.com/browserslist/browserslist
         */
      },
      corejs: '3',
      // corejs: { version: 3, proposals: true },
      /**
       * https://babeljs.io/docs/en/usage#polyfill
       * https://github.com/zloirock/core-js#babelpreset-env
       * "usage" will practically apply the last optimization mentioned above where you only include the polyfills you need
       */
      useBuiltIns: 'usage'
    }
  ]
]
const plugins = []

if (process.env['ENV'] === 'prod') {
  // plugins.push(...);
}
module.exports = { presets, plugins }

同じかどうか、違うなら何が違うのかが知りたい。

また、babeljs 7.4 を core-js 3 で使用する最良の方法は何ですか？

解決方法は？

もしかしたら同じかも？

その通りです。 preset- の部分はオプションです。あなたが行っているのは

presets: ["@babel/env"]

の中にあるので、Babelはそれがプリセットであることをすでに知っています。 presets の配列に追加されます。 preset- を自動的にモジュール名として使用します。

に適用されます。 plugins も同様です。

の表をご覧ください。 バベル問題 を実装し、より多くの例を示しています。