前端自動化之babel本地化安裝

npm添加package.json

cd到項目根目錄直接調用npm init 會創建package.json文件

本地安裝bebel(並非全局安裝，這種情況下cmd命令中babel命令不識別)：

步驟參考http://babeljs.io/

　　1.安裝  npm install --save-dev babel-cli babel-preset-env

　　2.項目根目錄創建 .babelrc文件

　格式如下：

{
  "presets": ["env"]
}

這個presets屬性后面的數組值表示babel組件

env表示babel-preset-env

react表示 babel-preset-react

先本地安裝到項目文件夾下 npm install --save-dev 組件名

在手動在.babelrc文件上添加

注：本地安裝的babel命令是通過npm在package中script屬性下調用本例子中想查看babel版本，在package中屬性scripts中添加屬性getbabelVersion

package.json文件如下

{
  "name": "project-blog",
  "version": "0.0.1",
  "description": "folder to study sass npm yeoman",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib",
    "getbabelVersion" :"babel --version"
  },
  "author": "Tangerwei",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-env": "^1.1.6",
    "babel-preset-react": "^6.16.0"
  }
}

然后本目錄下運行（注意把執行路徑切換到項目根目錄下，package也在此目錄下） npm run getbabelVersion

輸出：6.18.0 (babel-core 6.21.0)

而且注意一點，執行babel命令的時候會自動更新devDependencies屬性

至此 babel插件安裝完成。

附加：babel默認只轉換語法，並不轉換api，倘若是es6中出現的api，es5中並沒有怎么辦？利用 babel-polyfill

然后，在腳本頭部，加入如下一行代碼。

import("babel-polyfill");或者require("babel-polyfill");

詳細清單可以查看https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js文件

npm run build 編譯，但是還需要安裝一個babel-preset-es2015

babel安裝使用的坑 參考 http://www.imooc.com/article/11157，非常好的一篇文章，不過和我一樣的新手需要手動安裝的同時多看幾遍

思考：

的確npm的使用有相當強的js風格，利用json作為配置跟項目如出一轍

npm的可以在package.json調用本地的node插件，這樣可以在本地直接完成js，css往原生和低版本方向的編譯。而發布經過編譯版本，編程效率確實有很大的提高，

不僅如此，甚至js的低版本兼容性更好。

package.json參考http://javascript.ruanyifeng.com/nodejs/packagejson.html

babel常用命令參考http://www.ruanyifeng.com/blog/2016/01/babel.html