ES6學習之Babel的正確安裝姿勢


本文介紹Babel6.x 使用教程,親試,比較好用

 

首先呢,可以使用Babel在線轉換 https://babeljs.io/repl/

 

然后進入主題:安裝Babel(命令行環境,針對Babel6.x版本)

 

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
 
 


免責聲明!

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



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