Babelでes6ファイルをコンパイルする場合の詳細説明（コード付き）

今回は、Babel が es6 ファイルをコンパイルする場合の詳細な説明 (コード付き) をお送りします。 以下は、Babel が es6 ファイルをコンパイルするための 注意事項 についてです。

1.babel

babel公式ウェブサイト

2. 上記のコマンドを使用してbabelをインストールします。ここで、iはインストールを意味し、-gはグローバルにインストールを意味します。 3.

を使用してファイルes6.js

npm i babel-cli -g

を作成し、次のコマンドを使用してコンパイルします:

let num = [1,2,3,4]; 
let plusDouble = num.map(item => item * 2); 
console.log(plusDouble);

このようにして、コンパイルされたファイルが現在のディレクトリに表示されます。ただし、コンパイルされたファイルを実行すると、依然としてエラーが報告されます。実際、主な理由は、上記のコンパイルが制約を追加しないこと、つまりコンパイル方法を babel に指示しないことです。 babel.

4. 設定

(1) ファイルによる設定 プロジェクトディレクトリにファイル .babelrc を作成し、そのファイル内に次のコードを記述します。 -in、次のコードを追加します。 オブジェクト プリセットとプラグイン

babel es6.js -o compiled.js

プラグインをインストールします。次のプラグインを使用すると、ES6 コードを ES5 コードにコンパイルできます:

{ 
 "presets": [], 
 "plugins": [] 
}

(--save-devコードはローカル開発の依存関係でのインストールを表します)

次に、.babelrc 内のファイルを次の内容に変更します:

npm i --save-dev babel-preset-es2015

この時点で、コンパイル コマンドを実行して次の結果を取得します:

{ 
 "presets": ["es2015"], 
 "plugins": [] 
}

結果。実行後は正常に出力できます

これで、簡単なコンパイルを実行できます。ただし、es7 のいくつかの新機能にはまだいくつかの制限があります。この方法では、オブジェクト スプレッダー プラグインの下に示すように、プラグインを使用してコンパイルします。

object

-rest-spread で、同様に

"use strict";  
var num = [1, 2, 3, 4]; 
var plusDouble = num.map(function (item) { 
 return item * 2; 
}); 
console.log(plusDouble);

をインストールするコマンドを使用します。同様に、プラグインに移動して

npm i babel-plugin-transform-object-rest-spread --save-dev

を変更し、コード内に次の内容を記述します。 . は ES7 の既成概念です):

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-object-rest-spread"] 
}

コンパイル後の結果は:

let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses);

_extends メソッドを追加することでオブジェクトエクスパンダを変換し、実行中のコードが正常に結果を出力できるようになります

(2) 設定を読み込むことでwebpack

設定ファイル

の他の

プロパティ

について、この記事のケースを読んだ後は方法をマスターしたと思います。さらにエキサイティングなことが起こるでしょう。php中国語ウェブサイトの他の関連記事にも注目してください。 推奨読書:

jsを使用してページタグの数を数える方法

WeChatミニプログラムで確認コードパスワード入力ボックス機能を開発する方法

以上がBabelでes6ファイルをコンパイルする場合の詳細説明（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。