使用babel將es6轉換爲es5

一、直接安裝Babel法：

1.1) 全局安裝Babel。

　　npm install -g babel-cli

 

1.2）局部安裝，將babel直接安裝到項目中，它會自動在package.json文件中的devDependencies中加入babel-cli。

　　npm install -g babel-cli --save-de

注意：若是沒有package文件，能夠運行下列命令，建立webpack配置文件

　　npm init

 

建立後，將下列代碼複製到packge.json

{

   "devDependencies" : {

     "babel-cli" : "^6.22.2"

   }

}

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

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

 

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

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

# 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

這裏咱們選擇安裝ES2015轉碼規則

安裝後，在.babelrc配置的內容以下，轉換爲ES5，因此填寫es2015

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

到此配置完成，能夠開始轉碼了

四、按項目需求在下列命令中挑選合適的命令完成轉碼

 

# 轉碼結果輸出到標準輸出

$ 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