Babel

使用方式

任何 JavaScript 資源檔案都可以使用 js.Babel 轉譯為另一個版本的 JavaScript。此方法的參數包括資源物件及下方列出的選用設定選項。Babel 使用 babel cli。

設定

在執行 Babel 和類似工具時，我們會將主要專案的 node_modules 加入 NODE_PATH。對於 Babel，此部分有一些已知的問題。因此，若您的 babel.config.js 位於 Hugo 模組中（而非專案本身），建議使用 require 載入預設/插件，例如：

module.exports = {
  presets: [
    [
      require("@babel/preset-env"),
      {
        useBuiltIns: "entry",
        corejs: 3,
      },
    ],
  ],
};

選項

config

（string）Babel 設定檔的路徑。Hugo 預設會在專案中尋找 babel.config.js。有關這些設定檔的更多資訊請參考：babel configuration。

minified

（bool）在輸出時儘量減少檔案大小。

noComments

（bool）是否在生成的輸出中寫入註解（預設為 true）。

compact

（bool）是否移除多餘的空白字元和換行符號。若未設定，預設為 auto。

verbose

（bool）是否記錄所有內容。

sourceMap

（string）輸出 inline 或 external 的 sourcemap。External sourcemaps 會寫入到目標輸出檔案名稱 + “.map”。Input sourcemaps 可以從 js.Build 和 node 模組中讀取並合併到輸出的 sourcemaps 中。

範例

{{- $transpiled := resources.Get "scripts/main.js" | babel  -}}

或包含選項：

{{ $opts := dict "noComments" true }}
{{- $transpiled := resources.Get "scripts/main.js" | babel $opts -}}