JavaScript中ES6 Babel正確安裝過程

1、首先安裝babel-cli(用於在終端使用babel)
  npm install -g babel-cli
2、然後安裝babel-preset-es2015插件
  npm install --save babel-preset-es2015
  注:Babel5版本默認包含各種轉換插件,然而Babel6.x相關轉換插件需要自己下載,如transform-es2015-arrow-functions、transform-es2015-classes等,而ES2015 preset包含了所有插件。如果不安裝任何插件,那麼在命令行進行轉換是沒有任何效果的!
  其中--save參數自動更新package.json文件,寫進依賴項
3、在命令行輸入:
  babel es6.js --presets es2015
輸出:
"use strict";
 [1, 2, 3].map(function (x) {
  return x * x;
 });
  注:後面的參數--presets es2015表示使用該插件進行編譯,如果不寫上轉換是沒有效果的。
4、插件配置
  每一次都寫上該參數那是很麻煩的,可以在當前目錄下新建配置文件 .babelrc。
  但是在windows系統中,不允許直接右鍵建立沒有文件名的文件,可以通過cmd命令行創建:在當前文件夾打開cmd並鍵入命令
  type nul>.babelrc
  即可在當前目錄下建立文件.babelrc,接着在文件中寫入:

?
{
  "presets": ['es2015']
}
  那麼就可以直接在命令行中使用babel es6.js進行轉換而無需添加表明所用插件的參數
  除了建立.babelrc文件之外,也可在package.json中進行配置,添加以下屬性即可:
?
"babel": {
  "presets": ["es2015"]
}
附Babel常用命令:
1、轉換es6.js文件並在當前命名行程序窗口中輸出
  babel es6.js
2、將es6.js轉換後輸出到es5.js文件中(使用 -o 或 --out-file )
  babel es6.js -o es5.js
  babel es6.js --out-file es5.js
3、實時監控es6.js一有變化就重新編譯(使用 -w 或 --watch )
  babel es6.js -w --out-file es5.js
  babel es6.js --watch --out-file es5.js
4、編譯整個src文件夾並輸出到lib文件夾中(使用 -d 或 --out-dir )
  babel src -d lib
  babel src --out-dir lib
5、編譯整個src文件夾並輸出到一個文件中
  babel src --out-file es5.js
6、直接輸入babel-node命令,可以在命令行中直接運行ES6代碼
  babel-node

轉載地址:http://www.cnblogs.com/zhenwen/archive/2016/07/17/5679589.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章