babel使用入門

前言:隨着ES6普及的範圍越來越廣,學習並使用它是勢在必行的,在正式學習ES6之前,必須對ES6的轉換器要熟悉,知名度比較大的是Traceur和babel,今天我就來整理一下我在學習配置babel時的步驟以及遇到的坑,因爲剛開始學習,所以寫的並不全,之後遇到的坑以及心得,也都會在這裏更新,如有不足,歡迎指出。

一、babel初見 之 配置步驟

1、準備

系統環境:win10
配置環境:node,npm(如何安裝node以及npm請另尋文檔)
項目文件夾:新建一個文件夾作爲一個項目文件夾,打開cmd(快捷鍵:window+R),進入新建的這個文件夾的目錄下,執行npm init(相關信息可一路按Enter鍵,設置爲默認信息),最終生成了package.js文件。
這裏寫圖片描述

2、配置 .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


3、使用命令行轉碼 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












參考文章:阮一峯前輩所寫的babel入門教程http://www.ruanyifeng.com/blog/2016/01/babel.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章