ES6轉碼器babel的使用


1. 進入ES6的項目,執行

npm init // 初始化package.json

 

2. 在與package.json同一目錄下編寫配置文件 .babelrc

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

 

安裝babel

// 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

 

然后,將安裝好的規則加入到 .babelrc

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

 

安裝 babel-cli 工具,用於命令行轉碼

npm install --global babel-cli

 

// 轉碼輸出文件

example.js

[1,2,3].map(x => x*x);

// 執行轉碼

babel example.js -o compile.js --presets es2015

轉碼后的compiled.js文件:

"use strict";

[1, 2, 3].map(function (x) {
  return x * x;
});

 

實時監聽編譯文件:

To compile a file every time that you change it, use the --watch or -w option:

$ babel example.js --watch -o compiled.js --presets es2015

 

babel在線轉碼工具:

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM