安裝Babel(命令行環(huán)境滤钱,針對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)換插件件缸,然而Babel6.x相關(guān)轉(zhuǎn)換插件需要自己下載,如transform-es2015-arrow-functions叔遂、transform-es2015-classes等他炊,而ES2015 preset包含了所有插件。如果不安裝任何插件已艰,那么在命令行進行轉(zhuǎn)換是沒有任何效果的痊末!
其中--save參數(shù)自動更新package.json文件,寫進依賴項
3哩掺、在命令行輸入:
babel es6.js --presets es2015
輸出:
"use strict";
[1,2,3].map(function (x) {
returnx * x;
});
注:后面的參數(shù)--presets es2015表示使用該插件進行編譯凿叠,如果不寫上轉(zhuǎn)換是沒有效果的。
4嚼吞、插件配置
每一次都寫上該參數(shù)那是很麻煩的盒件,可以在當(dāng)前目錄下新建配置文件.babelrc。
但是在windows系統(tǒng)中舱禽,不允許直接右鍵建立沒有文件名的文件炒刁,可以通過cmd命令行創(chuàng)建:在當(dāng)前文件夾打開cmd并鍵入命令
type nul>.babelrc
即可在當(dāng)前目錄下建立文件.babelrc,接著在文件中寫入:
{
"presets": ['es2015']
}
那么就可以直接在命令行中使用babel es6.js進行轉(zhuǎn)換而無需添加表明所用插件的參數(shù)
除了建立.babelrc文件之外誊稚,也可在package.json中進行配置翔始,添加以下屬性即可:
"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绽昏、實時監(jiān)控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