babel安裝

1、babel配置步驟
一、準備
系統環境：win7
配置環境：node，npm（如何安裝node以及npm請另尋文檔）
項目文件夾：新建一個文件夾做爲一個項目文件夾，打開cmd（快捷鍵：window+R），進入新建的這個文件夾的目錄下，執行npm init（相關信息可一路按Enter鍵，設置爲默認信息），最終生成了package.js文件。

二、配置 .babelrc 文件
2.1建立.babelrc文件
由於在windows系統中，不容許直接右鍵創建沒有文件名的文件，因此建立 .babelrc 文件有兩個方式，第一個是直接經過編輯器建立，第二個是直接經過cmd命令行建立。
如下是cmd命令行建立方式：
在當前項目文件夾下，使用命令行：

type nul>.babelrc

 

2.2編寫.babelrc文件內容
該文件用來配置轉碼規則和插件，基本格式以下：

{
"presets": [], //設置轉碼規則
"plugins": [] //設置插件
}

官方提供如下的規則集，能夠根據須要安裝：

# 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"
],
"plugins": []
}

注意：Babel工具和模塊的使用以前，都必須先寫好 .babelrc。

 

三、使用命令行轉碼 babel-cli
Babel提供babel-cli工具，用於命令行轉碼。它的安裝命令以下：

# 全局安裝
npm install --global babel-cli

# 在項目文件中安裝
npm install --save-dev babel-cli

在全局安裝babel-cli，這意味着，若是項目要運行，全局環境必須有Babel，也就是說項目產生了對環境的依賴， 而且這樣作也沒法支持不一樣項目使用不一樣版本的Babel。因此官網強烈建議咱們使用後一種方式，在項目中安裝。
在項目中安裝以後，須要改寫package.js：

{
//...略去了其餘的內容
"devDependencies": {
"babel-cli": "^6.0.0" //這裏的版本號爲安裝的時候的版本號，通常安裝的時候就會自動寫入
},
"scripts": {
"build": "babel src -d lib"
//編譯整個 src 目錄並將其輸出到 lib 目錄。這裏的src指的是須要轉換的目錄，lib指的是輸出的內容的存放目錄
},
}

注意：若是建立的目錄文件夾名稱不爲src和lib，請記得必定要替換，否則後續轉換時會報錯。

轉碼的時候，就執行下面的命令：

npm run build

babel-cli基本用法以下：

# 轉碼結果輸出到標準輸出
babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
babel example.js --out-file compiled.js
# 或者
babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
babel src --out-dir lib
# 或者
babel src -d lib

# -s 參數生成source map文件babel src -d lib -s