本文介紹Babel6.x的安裝過(guò)程~首先呢，可以使用Babel在線轉(zhuǎn)換 https://babeljs.io/repl/

然后進(jìn)入主題：安裝Babel（命令行環(huán)境，針對(duì)Babel6.x版本）

1、首先安裝babel-cli（用于在終端使用babel）

　　npm install -g babel-cli

2、然后安裝babel-preset-es2015插件

　　npm install --save babel-preset-es2015

　　注：Babel5版本默認(rèn)包含各種轉(zhuǎn)換插件，然而B(niǎo)abel6.x相關(guān)轉(zhuǎn)換插件需要自己下載，如transform-es2015-arrow-functions、transform-es2015-classes等，而ES2015 preset包含了所有插件。如果不安裝任何插件，那么在命令行進(jìn)行轉(zhuǎn)換是沒(méi)有任何效果的！

　　其中--save參數(shù)自動(dòng)更新package.json文件，寫(xiě)進(jìn)依賴項(xiàng)

3、在命令行輸入：

　　babel es6.js --presets es2015

輸出：

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

　　注：后面的參數(shù)--presets es2015表示使用該插件進(jìn)行編譯，如果不寫(xiě)上轉(zhuǎn)換是沒(méi)有效果的。

4、插件配置

　　每一次都寫(xiě)上該參數(shù)那是很麻煩的，可以在當(dāng)前目錄下新建配置文件 .babelrc。

　　但是在windows系統(tǒng)中，不允許直接右鍵建立沒(méi)有文件名的文件，可以通過(guò)cmd命令行創(chuàng)建：在當(dāng)前文件夾打開(kāi)cmd并鍵入命令

　　type nul>.babelrc

　　即可在當(dāng)前目錄下建立文件.babelrc，接著在文件中寫(xiě)入：

　{
　　　"presets": ['es2015']
　} 

　　那么就可以直接在命令行中使用babel es6.js進(jìn)行轉(zhuǎn)換而無(wú)需添加表明所用插件的參數(shù)

　　除了建立.babelrc文件之外，也可在package.json中進(jìn)行配置，添加以下屬性即可：

"babel": {
　　"presets": ["es2015"]
}

附Babel常用命令：

1、轉(zhuǎn)換es6.js文件并在當(dāng)前命名行程序窗口中輸出

　　babel es6.js

2、將es6.js轉(zhuǎn)換后輸出到es5.js文件中（使用 -o 或 --out-file ）

　　babel es6.js -o es5.js

　　babel es6.js --out-file es5.js

3、實(shí)時(shí)監(jiān)控es6.js一有變化就重新編譯（使用 -w 或 --watch ）

　　babel es6.js -w --out-file es5.js
　　babel es6.js --watch --out-file es5.js

4、編譯整個(gè)src文件夾并輸出到lib文件夾中（使用 -d 或 --out-dir ）

　　babel src -d lib
　　babel src --out-dir lib

5、編譯整個(gè)src文件夾并輸出到一個(gè)文件中

　　babel src --out-file es5.js

6、直接輸入babel-node命令，可以在命令行中直接運(yùn)行ES6代碼

　　babel-node

以上所述是小編給大家介紹的JavaScript中ES6 Babel正確安裝過(guò)程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論