web-dev-qa-db-ja.com

Babel 6をES5 javascriptにコンパイルするにはどうすればよいですか？

最新バージョンのbabelをインストールしました。現在6.4.0。次のコードを含むmyclass.jsというファイルを作成します。

class MyClass {
    constructor(name) {
        console.log("I am a MyClass object .. ", name);
    }
}

var myclass = new MyClass('1234');

クラスを作成した後、コマンドラインで次の操作を行います。

$> babel ./src/myclass.js --out-file ./out/app.js

App.jsファイルにはes5でコンパイルされたjavascriptが含まれているはずですが、myclass.jsファイルとまったく同じコードが含まれています。これを引き起こしているのは何ですか？

ecmascript-6babeljs
55
mattwallace

ES5をターゲットにするようにBabelに指示するのではなく、そのために必要なプリセット/プラグインを選択します。たとえば、es2015プリセットを使用すると、ES6コードがES5互換コードにコンパイルされます。 「ターゲット」を指定しません。

以下のガイドでは、ES6コードをES <= 5をサポートする環境で実行できるコードに変換するためにBabelを使用する方法を説明します。

0. Babel 5からのAPIの変更に関する注意

Babel 6のドキュメント ：

Babelパッケージはもうありません。以前は、コンパイラ全体とすべての変換に加えて多数のCLIツールでしたが、これは不必要に大きなダウンロードにつながり、少し混乱を招きました。これで、2つの個別のパッケージに分割しました：babel-cliとbabel-core。

そして：

Babel 6はデフォルトの変換なしで出荷されるため、ファイルに対してBabelを実行すると、何も変更せずに出力します。

______

1. babel-cliをインストールします

まず、ドキュメントのように、babel-cliをインストールする必要があります。

$ npm install babel-cli

______

2. .babelrcでプリセットを定義します

次に、ファイルにローカルな.babelrc（ docs ）を使用し、Babelで使用するpresetsを明示的に定義する必要があります。たとえば、ES6 +機能の場合、 envプリセット を使用します。

...ターゲット環境で必要な構文変換（およびオプションで、ブラウザーポリフィル）を細かく管理する必要なく、最新のJavaScriptを使用できるスマートプリセット。

インストールしてください：

npm install @babel/preset-env

そして、あなたの.babelrcでそれを宣言します：

{
  "presets": ["@babel/preset-env"]
}

注：Babel 7.xを使用している場合、「プロジェクト全体の構成」（babel.config.js）を使用することをお勧めします（- docs ）これは「広く適用され、プラグインとプリセットをnode_modulesまたはsymlinkedパッケージのファイルに簡単に適用することさえ可能にします」。

______

3. babelを実行します

例のようにbabelコマンドを実行すると動作するはずです：

$> babel ./src/myclass.js --out-file ./out/app.js

または、 webpack 、 rollup 、または browserify のようなバンドラーをそれぞれのbabelプラグインとともに使用します。

67
sdgluck