広く使用されているトランスコーダ -- Babel

参考:

Babel

Babelは、既存の環境で実行できるようにES6コードをES5コードに変換できる広く使用されているトランスコーダです

// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {  return item + 1;});

設定ファイル

---

設定ファイルは .babelrc で、プロジェクトのルート ディレクトリに保存されます。 Babel を使用する最初のステップは、このファイルを設定することです

<span style="color: #888888"><code class=" language-javascript"><span class="token punctuation">{  <span class="token string">"presets"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">,  <span class="token string">"plugins"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">}<br/><br/><strong><code>presets</code>字段  </strong>设定转码规则，官方提供以下的规则集，你可以根据需要安装<br/></span></span></span></span></span></span></span></span></span></span></span></code></span>

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015# react转码规则
$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

  {"presets": [      "es2015",      "react",      "stage-2"],"plugins": []  }

babel-register

---

babel-register モジュールは、require コマンドを書き換えてフックを追加します。それ以降、require を使用して .js、.jsx、.es、および .es6 サフィックスを持つファイルをロードするたびに、ファイルは最初に Babel でトランスコードされます

$ npm install --save-dev babel-register

使用する場合は、最初にbabel-registerをロードする必要があります

require("babel-register");

require("./index.js?1.1.11");

次に、 Index.js を手動でトランスコードする必要はありません。

babel-register は現在のファイルではなく、require コマンドによってロードされたファイルのみをトランスコードすることに注意してください。さらに、リアルタイムトランスコーディングであるため、開発環境での使用にのみ適しています

babel-core

---

一部のコードがトランスコーディングのためにBabelのAPIを呼び出す必要がある場合、 babel-core モジュールを使用する必要があります。

インストールコマンド: $ npm install babel-core --save , これで、プロジェクト内で babel-core を呼び出すことができます。

var babel = require('babel-core');

// 文字列トランスコーディング
babel.transform('code();', options);
// => ; { code, map, ast }

// ファイルトランスコーディング (非同期)
babel.transformFile('filename.js', options, function(err, result) {
result; / / => ; { コード、マップ、ast }
});

// ファイルのトランスコーディング (同期)
babel.transformFileSync('filename.js', options);
// =>コード、マップ、ast }

// Babel AST トランスコーディング
babel.transformFromAst(ast, code, options);
// => { コード, マップ, ast }

オブジェクト オプションを設定するには、公式ドキュメント http://babeljs.io/docs/usage/options/

を参照してください。以下は例です。
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core').transform(es6Code, {
presets: ['es2015']
})
上記のコードでは、transform メソッドの最初のパラメーターは変換する必要がある ES6 コードを示す文字列で、2 番目のパラメーターは変換の構成オブジェクトです。

babel-polyfill

---

Babel はデフォルトで新しい JavaScript 構文 (構文) のみを変換し、Iterator、Generator、Set、Maps、Proxy、Reflect、などの新しい API は変換しません。 Symbol 、 Promise 、その他のグローバル オブジェクト、およびグローバル オブジェクトで定義された一部のメソッド (Object.assign など) はトランスコードされません。

解決策: babel-polyfill を使用して現在の環境にシムを提供します

$ npm install --save babel-polyfill

スクリプトの先頭に、次のコード行を追加します:

import 'babel-polyfill';
// または
require('babel-polyfill');

以上が広く使用されているトランスコーダ -- Babelの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。