前端自動化之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文件

　格式以下：

1 {
2   "presets": ["env"]
3 }

這個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