Babel的安裝和使用

安裝Node.JS 和 npm,如未安裝可參照其餘文章

1.建立一個package.json

npm init (回車, 一直下一步便可)

安裝 Babel

npm install --save-dev babel-cli
測試是否安裝成功
./node_modules/.bin/babel --help 查看幫助

安裝ECMAScript6/2015 (ES6/ES2015)

npm install --save-dev babel-preset-latest

在項目根目錄建立 .babelrc 配置文件

{
  "presets": ["latest"] //或者,二選一 "presets": ["es2015"] }

配置完成後, babel能夠把咱們es6的語法轉換成es5的語法

新建一個main.js文件

在 main.js 內寫入一下es6的代碼
    var fn = (a,b) => a + b;

終端執行

./node_modules/.bin/babel main.js(編譯的文件)

執行完成能夠在終端看到轉換後的代碼

從Babel 6.0開始, 再也不直接提供瀏覽器版本, 而是要用構建工具構建出來. 若是你沒有或不想使用構建工具, 能夠經過安裝5.x版本的babel-core 模塊獲取

1-安裝

npm install babel-core@5

2-編寫測試文件

在跟目錄新建一個html文件, 好比 index.html 引入 browser.js 和 browser-polyfill.js 兩個文件, 這兩個是必須引入的問題件

<script src="./node_modules/babel-core/browser.js" type="text/javascript"></script> <script src="./node_modules/babel-core/browser-polyfill.js" type="text/javascript"></script>

3-另外引入咱們編寫的es6代碼的js文件

注意: browser.js 是 Babel 提供的轉換器腳本, 在引入咱們編寫的es6的文件時, script 標籤的 type 須要是 "text/babel"

<script type="text/babel" src="./main.js"></script> 

4-開啓一個瀏覽器服務, 在瀏覽器端顯示效果

browser-sync start --server

在開啓一個服務器時候你可能遇到如下兩個問題

1.-bash: browser-sync: command not found

解決方案：

加載該模塊
npm install -g browser-sync

2-運行index.html時候報錯 Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-resource.

解決方案：

( 須要替換路徑中的yourname )
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/yourname

package.js 添加， 而後打包 npm run build

  "scripts": {
    "build": "babel js.js --out-file bunder.js"
  },

 

第二種方法安裝babel 每次手動打包

本地文件 npm init 建立package.json

npm install babel-cli --save-dev

npm install babel-preset-es2015 --save-dev

在項目根目錄建立 .babelrc 配置文件

{
  "plugins": [],
  "presets": ["latest"] //或者,二選一 "presets": ["es2015"] }
package.js 添加， 而後打包 npm run build

  "scripts": {     "build": "babel js.js --out-file bunder.js"   },