跳至主要內容

@babel/cli

Babel 內建一個 CLI，可用於從命令列編譯檔案。

此外，各種進入點腳本都位於頂層套件的 @babel/cli/bin。有一個 shell 可執行公用程式腳本，babel-external-helpers.js，以及主要的 Babel cli 腳本，babel.js。

安裝​

雖然您可以在您的機器上全球安裝 Babel CLI，但最好是局部逐個專案安裝。

這有兩個主要原因。

  1. 同一台機器上的不同專案可以依賴於 Babel 的不同版本，讓您能個別更新它們。
  2. 不對您正在使用的環境產生隱含依賴性，會讓您的專案更具可攜性，也更容易設定。

我們可以透過執行以下指令來局部安裝 Babel CLI

npm install --save-dev @babel/core @babel/cli
注意事項

如果您沒有 package.json，請在安裝前建立一個。這將確保與 npx 指令正確互動。

安裝完成後，您的 package.json 檔案應包含

{
  "devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.0.0"
  }
}

用法​

注意事項

請先安裝 @babel/cli 和 @babel/core，然後再安裝 npx babel，否則 npx 會安裝過時的 babel 6.x。除了 npx，您也可以將它放入 npm run script 中，或者使用相對路徑執行。./node_modules/.bin/babel

Shell
npx babel script.js
Shell
npx babel --help

編譯檔案​

編譯檔案 script.js 並輸出至 stdout。

Shell
npx babel script.js
# output...

如果你想輸出至檔案，你可以使用 --out-file 或 -o。

Shell
npx babel script.js --out-file script-compiled.js

若要每次在變更檔案時編譯檔案，請使用 --watch 或 -w 選項

Shell
npx babel script.js --watch --out-file script-compiled.js

使用來源地圖編譯​

注意事項

自 v7.19.3 起，如果未指定此參數，@babel/cli 將遵循設定檔。

如果你想新增來源地圖檔案，可以使用 --source-maps 或 -s。

Shell
npx babel script.js --out-file script-compiled.js --source-maps

或者，如果你希望有內嵌來源地圖，請改用 --source-maps inline。

Shell
npx babel script.js --out-file script-compiled.js --source-maps inline

編譯目錄​

使用 --out-dir 或 -d 編譯整個 src 目錄並將其輸出至 lib 目錄。這不會覆寫 lib 中的任何其他檔案或目錄。

Shell
npx babel src --out-dir lib

編譯整個 src 目錄並將其輸出為單一串接檔案。

Shell
npx babel src --out-file script-compiled.js

包含 TypeScript 檔案的目錄​

使用 --extensions 選項指定 Babel 在編譯整個 src 目錄時應處理哪些檔案副檔名。預設的 --extensions 可從Babel.DEFAULT_EXTENSIONS存取。

Shell
npx babel src --out-dir lib \
  --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs \
  --presets=@babel/preset-typescript,@babel/preset-env,@babel/preset-react

忽略檔案​

忽略規格和測試檔案

Shell
npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"

複製檔案​

複製不會編譯的檔案

Shell
npx babel src --out-dir lib --copy-files

如果您不想複製忽略的 JavaScript 檔案

歷史
版本變更
v7.8.0新增 --copy-ignored
v7.8.4將 copyeIgnored 選項預設值變更為 true，可透過 --no-copy-ignored 停用
Shell
npx babel src --out-dir lib --copy-files --no-copy-ignored

管道檔案​

透過 stdin 管道輸入檔案並將其輸出至 script-compiled.js

Shell
npx babel --out-file script-compiled.js < script.js

使用外掛程式​

使用 --plugins 選項指定編譯中要使用的外掛程式

Shell
npx babel script.js --out-file script-compiled.js --plugins=@babel/transform-class-properties,@babel/transform-modules-amd

使用預設值​

使用 --presets 選項指定編譯中要使用的預設值

Shell
npx babel script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/flow

使用設定檔​

忽略 .babelrc.json 或 .babelrc​

忽略專案的 .babelrc 或 .babelrc.json 檔案中的設定，並使用 cli 選項，例如自訂建置

Shell
npx babel --no-babelrc script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/preset-react

自訂設定檔路徑​

Shell
npx babel --config-file /path/to/my/babel.config.json --out-dir dist ./src

請參閱 此處 以取得有關設定檔的更多資訊。

設定檔案副檔名​

新增於：v7.8.0

預設情況下，轉譯後的檔案將使用 .js 副檔名。

您可以使用 --out-file-extension 控制輸出檔案副檔名

Shell
npx babel src --out-dir lib --out-file-extension .mjs

您也可以使用 --keep-file-extension 保留輸入檔案副檔名

Shell
npx babel src-with-mjs-and-cjs --out-dir lib --keep-file-extension

請注意，--keep-file-extension 和 --out-file-extension 無法同時使用。

進階用法​

有許多其他選項可用，請參閱 選項、babel --help 和其他章節以取得更多資訊。