babel的使用以及安裝配置

簡介

babel是一個普遍使用的轉碼器，能夠將ES6代碼轉化爲ES5代碼，從而在現有環境執行，這意味着，你能夠如今就用ES6編寫程序，而不用擔憂現有環境是否支持。

 

安裝及配置

npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘寶鏡像安裝會更快。

步驟：進入項目 ==>cnpm install babel-cli --save-dev

 

爲何不安裝在全局

若是安裝在全局，那意味着項目要運行，全局環境必須有bable，也就是說項目產生了對環境的依賴。另外一方面，這樣作也沒法支持不一樣項目使用不一樣版本的babel。

 

設定轉碼規則

根目錄下安裝：cnpm install babel-preset-es2015 --save-dev

 

安裝完成以後，再建立配置文件 .babelrc這個文件，得放在項目根目錄下，它的基本格式是：

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

presets字段設置的就是轉碼規則，plugins是設置的babel的插件。而後配置文件：

{
    "presets":["es2015"]
}

到這裏，關於babel的基本配置就完成了。

 

實例演示：

在項目根目錄下建立demo.js

let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item+1);

由於咱們如今是將babel安裝到了當前目錄下，因此不能直接在終端中babel轉換命令，得使用npm來運行，因此先在packge.json中編寫

{
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  },
  "scripts":{
      "build":"babel demo.js"
  }
}

進入根目錄，npm run build運行，查看結果

 

也能夠輸出到指定的目錄

{
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  },
  "scripts":{
      "build":"babel demo.js --out-file bunder.js"
  }
}

進入根目錄，npm run build運行，查看結果

此次會在根目錄下找到被編譯過的bunder.js文件

 

文件夾截圖