Babel快速入門

2020 年 4 月 6 日
筆記

作者：姜瑞濤
Github倉庫：https://github.com/jruit/babel-tutorial
博客：姜瑞濤的官方網站
原文鏈接：https://www.jiangruitao.com/docs/babel/rudiments/quick-start/
版權採用《署名-非商業性使用-禁止演繹 4.0 國際》許可協議轉載需註明原文作者、鏈接與版權協議

教程目前連載中，計劃2020勞動節全部完成

上一節是Babel簡介

這一節我們配置一個最簡單的Babel轉碼工程，來學習整個流程。

本節配套代碼是github倉庫 https://github.com/jruit/babel-tutorial 的babel01例子

一、Babel的安裝，配置與轉碼

Babel依賴Node.js，沒有安裝的話，去官網下載安裝最新穩定版本的Node.js。

在本地新建一個文件夾babel01，在該文件夾下新建一個js文件，文件命名為babel.config.js。該文件是 Babel配置文件，我們在該文件里輸入如下內容：

  module.exports = {      presets: ["@babel/env"],      plugins: []    }

然後在該文件夾下新建一個js文件main.js，該js里的代碼是我們需要轉譯的，我們寫入代碼

  var fn = (num) => num + 2;

然後執行下面的命令安裝三個npm包，這些npm包是Babel官方包

  // npm一次性安裝多個包，包名之間用空格隔開    npm install --save-dev @babel/cli @babel/core @babel/preset-env

安裝完成後，執行下面的命令進行轉碼，該命令含義是把main.js轉碼生成compiled.js文件

  npx babel main.js -o compiled.js

此時文件夾下會生成compiled.js，該文件是轉換後的代碼：

  "use strict";    var fn = function fn(num) {      return num + 2;    };

這就是一個最簡單的Babel使用過程，我們把用ES6編寫main.js轉換成了ES5的compiled.js。

二、Babel轉碼說明

babel.config.js是Babel執行時會默認在當前目錄尋找的Babel配置文件。

除了babel.config.js，我們也可以選擇用.babelrc或.babelrc.js這兩種配置文件，還可以直接將配置參數寫在package.json。它們的作用都是相同的，只需要選擇其中一種。我們將在另外一節詳細介紹Babel的配置文件，接下來默認使用babel.config.js。

@babel/cli，@babel/core與@babel/preset-env是Babel官方的三個包，它們的作用如下：

@babel/cli是Babel命令行轉碼工具，如果我們使用命令行進行Babel轉碼就需要安裝它。
@babel/cli依賴@babel/core，因此也需要安裝@babel/core這個Babel核心npm包。
@babel/preset-env這個npm包提供了ES6轉換ES5的語法轉換規則，我們在Babel配置文件里指定使用它。如果不使用的話，也可以完成轉碼，但轉碼後的代碼仍然是ES6的，相當於沒有轉碼。
這些工具後續都會有單獨的章節說明，現在先學會簡單使用即可。

小結：

1.一個完整的Babel轉碼工程通常包括如下：

Babel配置文件
Babel相關的npm包
需要轉碼的JS文件

2.我們通過以下命令對單個JS文件進行轉碼：

  npx babel main.js -o compiled.js

註：

1.如果安裝npm包慢的話，通過以下命令設置npm鏡像源為淘寶npm後再安裝

  npm config set registry https://registry.npm.taobao.org

2.npx babel main.js -o compiled.js命令里npx是新版Node里附帶的命令。它運行的時候默認會找到node_modules/.bin/下的路徑執行。分別與下面的命令等效。

linux/unix命令行：

  node_modules/.bin/babel main.js -o compiled.js

windows的cmd命令行(假設babel01在D:jiangruitao路徑下):

  D:jiangruitaobabel01node_modules.binbabel main.js -o compiled.js