使用Babel將單獨的js文件 中的 ES6轉碼爲ES5

 

若是你並無接觸過ES6，當你看到下面的代碼時，確定是有點懵逼的（這是什麼鬼？心中一萬頭神獸奔騰而過），可是你沒看錯，這就是ES6。無論你看不看它，它都在這裏。

1 2 3 4 5 6 7 8 9 10

var a = (msg) => () => msg;   var bobo = {   _name: "BoBo",   _friends: [],   printFriends() {     this._friends.forEach(f =>       console.log(this._name + " knows " + f));   } };

實際上，上面的這段代碼經過Babel轉換後，會變成：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

"use strict";   var a = function a(msg) {   return function () {     return msg;   }; };   var bobo = {   _name: "BoBo",   _friends: [],   printFriends: function printFriends() {     var _this = this;       this._friends.forEach(function (f) {       return console.log(_this._name + " knows " + f);     });   } };

好，言歸正傳，咱們嘗試下用一些方法來實現上面的轉碼效果吧。

一、直接安裝Babel法：

1.1) 首先全局安裝Babel。

1 2 3 4 5

$ npm install -g babel-cli   //也能夠經過直接將Babel安裝到項目中，在項目根目錄下執行下面命令，同時它會自動在package.json文件中的devDependencies中加入babel-cli //在執行安裝到項目中命令以前，要先在項目根目錄下新建一個package.json文件。 $ npm install -g babel-cli --save-dev

若是將babel直接安裝到項目中，它會自動在package.json文件中的devDependencies中加入babel-cli。以下所示：

1 2 3 4 5 6

//...... {   "devDependencies": {     "babel-cli": "^6.22.2"   } }

1.2) Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。

這個文件的完整文件名是 「.babelrc」，注意最前面是有個「.」的。若是總是提示 「必須鍵入文件名」 的錯誤，把文件名改爲「.babelrc.」，注意是先後都有一個點，這樣就能夠保存成功了

1 2 3 4

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

1.3) presets字段設定轉碼規則，官方提供如下的規則集，你能夠根據須要安裝。

點擊此處到Babel中文官網presets配置頁面：Babel Plugins

1 2 3 4 5 6 7 8 9 10 11

# 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

1.4) 根據官網的提示，當咱們用npm安裝好這些插件工具以後，咱們須要將這些規則加入到.babelrc中去。以下所示：

1 2 3 4 5 6 7 8

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

1.5) 轉碼、轉碼的規則：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

# 轉碼結果輸出到標準輸出 $ babel test.js   # 轉碼結果寫入一個文件 # --out-file 或 -o 參數指定輸出文件 $ babel a.js --out-file b.js # 或者 $ babel a.js -o b.js   # 整個目錄轉碼 # --out-dir 或 -d 參數指定輸出目錄 $ babel src --out-dir lib # 或者 $ babel src -d lib   # -s 參數生成source map文件 $ babel src -d lib -s

 

我這裏只是使用了es2015轉碼規則，測試代碼截圖以下圖