BabelJS - Babel 命令列介面

---

---

BabelJS 自帶一個內建的命令列介面，透過易於使用的命令，可以輕鬆地將 JavaScript 程式碼編譯到相應的 ECMAScript 版本。本章將討論這些命令的使用。

首先，我們將為專案安裝 babel-cli。我們將使用 babeljs 來編譯程式碼。

建立一個資料夾作為你的專案，用來練習 babel-cli。

命令

npm init

顯示

為上述專案建立的 package.json 檔案：

讓我們執行命令來安裝 babel-cli。

Babel 6 的包

npm install --save-dev babel-cli

Babel 7 的包

npm install --save-dev @babel/cli

顯示

我們已經安裝了 babel-cli，這是更新後的 package.json 檔案：

除此之外，我們還需要安裝 babel-preset 和 babel-core。現在讓我們看看安裝命令。

Babel 6 的包

npm install --save-dev babel-preset-env
npm install --save-dev babel-core

Babel 7 的包

npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env

這是上述命令更新後的 package.json 檔案：

由於我們需要將我們即將編寫的 JavaScript 程式碼編譯成具有向後相容性的程式碼，我們將將其編譯為 ECMAScript 5。為此，我們需要指示 babel 查詢預設，即 es 版本，其中將進行編譯。我們需要在專案根資料夾中建立一個.babelrc檔案，如下所示。

它包含一個具有以下預設細節的 json 物件：

{ "presets": ["env"] }

對於 babel 7，.babelrc 檔案如下：

{
   "presets":["@babel/env"]
}

我們已將 babel 本地安裝到專案中。為了在專案中使用 babel，我們需要在 package.json 中指定它，如下所示：

編譯 JS 檔案

現在我們可以編譯 JavaScript 檔案了。在專案中建立一個名為 src 的資料夾；在這個資料夾中，建立一個名為 main.js 的檔案，並編寫如下所示的 es6 javascript 程式碼：

命令

npx babel src/main.js

輸出

我們不會將編譯後的程式碼顯示在終端中，而是將其儲存在不同的檔案中，如下所示。

我們在專案中建立了一個名為 out 的資料夾，我們希望將編譯後的檔案儲存在那裡。以下是將編譯程式碼並將其儲存在我們想要的位置的命令。

命令

npx babel src/main.js --out-file out/main_out.js

輸出

命令中的 --out-file 選項幫助我們將輸出儲存在我們選擇的資料夾位置。

如果我們希望每次修改主檔案時都更新檔案，請向命令中新增--watch或-w選項，如下所示。

命令

npx babel src/main.js --watch --out-file out/main_out.js

輸出

您可以更改主檔案；此更改將反映在編譯後的檔案中。

在上述情況下，我們更改了日誌訊息，並且--watch選項會持續檢查任何更改，並將相同的更改新增到編譯後的檔案中。

編譯後的檔案

在我們之前的章節中，我們學習瞭如何編譯單個檔案。現在，我們將編譯一個目錄並將編譯後的檔案儲存在另一個目錄中。

在 src 資料夾中，我們將建立另一個 js 檔案，名為main1.js。目前，src 資料夾中有兩個 javascript 檔案main.js和main1.js。

以下是檔案中的程式碼：

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main1.js

var handler = () => {
   console.log("Added one more file");
}

以下命令將從src資料夾編譯程式碼並將其儲存到 out/ 資料夾中。我們已從out/資料夾中刪除所有檔案並將其清空。我們將執行該命令並檢查 out/ 資料夾中的輸出。

命令

npx babel src --out-dir out

我們在 out 資料夾中獲得了兩個檔案 - main.js 和 main1.js

main.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

main1.js

"use strict";

var handler = function handler() {
   console.log("Added one more file");
};

接下來，我們將執行以下命令，使用 babeljs 將這兩個檔案編譯成一個檔案。

命令

npx babel src --out-file out/all.js

輸出

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};
"use strict";

var handler = function handler() {
console.log("Added one more file");
};

如果我們想要忽略某些檔案不被編譯，我們可以使用 --ignore 選項，如下所示。

命令

npx babel src --out-file out/all.js --ignore src/main1.js

輸出

all.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

我們可以在檔案編譯期間使用外掛選項。要使用外掛，我們需要安裝它，如下所示。

命令

npm install --save-dev babel-plugin-transform-exponentiation-operator

expo.js

let sqr = 9 ** 2;
console.log(sqr);

命令

npx babel expo.js --out-file expo_compiled.js --plugins=babel-plugin-transform-exponentiation-operator

輸出

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

我們也可以在命令中使用預設，如下所示。

命令

npx babel src/main.js --out-file main_es5.js --presets=es2015

為了測試上述情況，我們已從 .babelrc 中刪除了 presets 選項。

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

我們也可以從命令列忽略 .babelrc，如下所示：

npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015

為了測試上述情況，我們已將 presets 添加回 .babelrc，但由於我們在命令中添加了 --no-babelrc，因此它將被忽略。main_es5.js 檔案內容如下：

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};