Babel編譯

Babel的目的就是讓你可使用最新的標準來開發,而後把兼容的問題交給它來完成.好比我如何在使用ES6的語法寫完以後將其轉換爲ES5知足通用性呢?

先用這個最經常使用的Babel的用法來引入吧.

一  首先在項目中新建一個package.json文件,也可使用 npm init 自動生成.

這裏簡單提一下,沒有fq的話建議使用國內的淘寶鏡像,速度會快不少,特別是相似Bable這樣安裝的內容比較多的狀況,使用下列命令便可

npm install -g cnpm --registry=https://registry.npm.taobao.org

二  安裝babel的命令行工具,babel-cli這裏安裝到開發環境,以後就可使用babel相關的命令了.

cnpm install babel-cli -D

三  安裝完成babel-cli以後須要所需編譯的預設(preset), 這裏咱們用到了ES6

cnpm i babel-preset-es2015 -D

可是在安裝完成以後會發現有一個不推薦提示,

deprecate babel-preset-es2015@* ????  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

如今已經不提倡使用以上的方法了,而是

cnpm i babel-preset-env -D

如今東西都裝好了,下面開始使用工具吧.

四  新建一個.babelrc用於配置預設presets

{
    "presets" :["env"]
}

五  除了預設以外還有插件plugin,

      好比我在代碼中使用了export和import,若是瀏覽器不支持這個用法便會報錯.可使用插件來編譯爲瀏覽器可兼容的語法.

{
    "plugins": [
        "transform-es2015-modules-umd"
    ]
}

固然也須要先 cnpm i babel-plugin-transform-es2015-modules-umd -D 安裝到開發環境

六  在package.json中你能夠看到已經將以前安裝的模塊添加到devDependencies中了.

七  在script中添加一個腳本

通常來講會將一個js文件夾下的全部js文件進行編譯,使用方式就是babel <dirname> -d <new dirname>, 還有一個很實用的小技巧就是使用-w進行文件監視,避免了重複手動編譯的過程.

  "scripts": {
    "build": "babel js -w -d lib"
  },

八  執行 npm run build ,將js文件夾中的js代碼編譯到lib文件夾中.

九  將其餘地方的文件(好比個人index.html中的js)路徑修改定位到編譯後的文件就可使用啦!!

在體驗了babel以後,最大的體會就是,

寫本身的代碼,讓babel去轉換吧!