web-dev-qa-db-ja.com

babel 7は、node_modulesにあるクラスES6をコンパイルしません

IE11 SCRIPT1002にエラーがあります:構文エラー(クラス構文の問題)。 2行の簡単なコード:

import { struct } from 'superstruct';
console.log('finished');

私のbabel7コンパイルクラスをES5コードにしたくない

私は.babelrcファイルを書いてみました:

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

および https://babeljs.io/docs/en/babel-plugin-transform-classes も修正されていません

更新:ES5コードでクラスを変換する@ babel/plugin-preset-es2015を使用しようとしましたが、このパッケージはbabel7で非推奨になりました

お願い助けて

8
zloctb

Node_modulesと子パッケージをBabel 7で変換するには、babel.config.jsファイルの代わりに.babelrcファイルを使用する必要があります。

この issue comment および project-wide configuration に関するバベルのドキュメントを参照してください。具体的には

Babel 7.xの新機能、Babelには「ルート」ディレクトリの概念として、デフォルトで現在の作業ディレクトリが設定されています。プロジェクト全体の構成の場合、Babelはこのルートディレクトリで「babel.config.js」を自動的に検索します。

...

プロジェクト全体の構成ファイルは構成ファイルの物理的な場所から分離されているため、広く適用する必要がある構成に理想的であり、プラグインとプリセットをnode_modulesまたはシンボリックリンクされたパッケージのファイルに簡単に適用できます。 Babel 6.xで設定する。

つまり、.babelrcはローカルプロジェクトファイルの変換(node_modulesを含まない)に使用され、babel.config.jsはプロジェクト全体と見なされ、バンドル時にパッケージの依存関係に適用されます(node_modules)。少し混乱しますが、うまくいけばそれが役立ちます!

編集する

以下は、webpackを使用してサンプルファイルをビルドするための完全なプロジェクト構成に関するもう少し詳しい情報です。ここで.babelrcの代わりにbabel.config.jsを使用すると、ここでは機能しません。webpack-cliを実行すると、スクリプトが生成されますscript.out.jsは、classキーワードを使用しません。

import { struct } from 'superstruct';
console.log('finished');
module.exports = {
    "presets": [
        [
            "@babel/preset-env",
            {
                    "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
};
module.exports = {
    entry: './script.js',
    output: {
        path: __dirname,
        filename: 'script.out.js',
    },
    module: {
        rules: [ {
            test: /\.m?js$/,
            use: {
                loader: 'babel-loader'
            }
        } ]
    }
}
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"babel-loader": "^8.0.5",
"superstruct": "^0.6.0",
"webpack-cli": "^3.2.3"
14
Garrett Johnson