babel 的簡單使用

以前在項目中使用.balelrc文件，可是一直不知道具體怎麼使用，就知道能夠將es6語法轉碼爲es5語法。

今天就簡單的作個例子，也算是記錄一下困擾了很久的問題。

轉碼步驟：

• 首先在項目的目錄中安裝Babel 

• 建立配置文件 .balelrc ，存放在項目的根目錄下

• 利用Babel提供的命令行工具@babel/cli，用命令行進行轉碼

1.1 安裝Babel，能夠直接使用命令行安裝。

npm install --save-dev @babel/core

1.2 配置文件 .babelrc

該文件用來設置轉碼規則和插件的，基本格式爲：

{
  "presets": [],
  "plugins": []
}

presets字段設定轉碼規則，官方提供一下的規則集，能夠按需加載

# 最新轉碼規則
$ npm install --save-dev @babel/preset-env

# react 轉碼規則
$ npm install --save-dev @babel/preset-react

而後將這些規則加入.babelrc文件

{
  "presets":[
    "@babel/env",
    "@babel.preset-react"
  ],
  "plugins":[]
}

1.3 命令行轉碼

Babel 提供命令行工具@babel/cli，用於命令行轉碼。

npm install --save-dev @babel/cli

基本用法：

# 轉碼結果輸出到標準輸出
$ npx babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib

# -s 參數生成source map文件
$ npx babel src -d lib -s

這裏附上本身轉碼配置文件和轉碼先後文件內容和轉碼命令（就是本身玩了一下，嘿嘿嘿~）

其實網上的資料仍是不少滴，就是本身想要知道怎麼本身轉碼，其實用webpack也是比較簡單的。

首先，安裝babel-preset-env包：npm install –save-dev babel-preset-env

在根目錄下建立.babelrc文件。

爲了檢驗咱們的配置是否成功，咱們再安裝babel-cli包：npm install --save-dev babel-cli，而後咱們在根目錄下建立一個babel_test文件用於測試，以下：

let arr = [1, 2, 3];
console.log([...arr]);

並在package.json文件中添加npm腳本：

"scripts": {
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "babel": "babel ./babel_test/test.js -o ./babel_test/res.js"
  },

該腳本的做用就是將test.js進行轉碼，並將轉碼後的內容存儲到res.js文件中。

在終端執行npm run babel則會在相同目錄下生成res.js:

"use strict";
var arr = [1, 2, 3];
console.log([].concat(arr));

該文件已經轉碼成功，說明咱們的配置是正確的。