一個廣泛使用的轉碼器--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 ; // => { code, map, ast }
});

// 檔案轉碼（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

# // Babel AST轉碼
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

 

設定物件options，可以參考官方文件http://babeljs.io/docs/usage/options/

#下面是一個例子。
　　var es6Code = 'let x = n => n + 1';
　　var es5Code = require('babel-core').transform(es6Code, {
   　　　　presets: ['es2015']
 　　})
在上方程式碼中，transform方法的第一個參數是一個參數是一個字串，表示需要轉換的ES6程式碼，第二個參數是轉換的配置物件。

 

 

babel-polyfill

---

 

Babel預設只轉換新的JavaScript句法（syntax），而不轉換新的API，例如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全域對象，以及一些定義在全域物件上的方法（如Object.assign）都不會轉碼。

解：使用babel-polyfill，提供一個墊片為目前環境

##$ npm install --save babel- polyfill

在腳本頭部，加入以下一行程式碼：

#import 'babel-polyfill';
// 或
require('babel-polyfill');

 

以上是一個廣泛使用的轉碼器--Babel的詳細內容。更多資訊請關注PHP中文網其他相關文章！