js.Babel

New in v0.128.0 
{{ with resources.Get "js/main.js" }}
  {{ if hugo.IsDevelopment }}
    {{ with . | babel }}
      <script src="{{ .RelPermalink }}"></script>
    {{ end }}
  {{ else }}
    {{ $opts := dict "minified" true }}
    {{ with . | babel $opts | fingerprint }}
      <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
    {{ end }}
  {{ end }}
{{ end }}

設定步驟

步驟 1
安裝 Node.js
步驟 2
安裝專案根目錄下所需的 Node.js 套件。
npm install --save-dev @babel/core @babel/cli
步驟 3
在您的網站配置中將 Babel 可執行文件加入 Hugo 的 security.exec.allow 清單：
hugo.
      
security:
  exec:
    allow:
    - ^(dart-)?sass(-embedded)?$
    - ^go$
    - ^npx$
    - ^postcss$
    - ^babel$

[security]
  [security.exec]
    allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^npx$', '^postcss$', '^babel$']

{
   "security": {
      "exec": {
         "allow": [
            "^(dart-)?sass(-embedded)?$",
            "^go$",
            "^npx$",
            "^postcss$",
            "^babel$"
         ]
      }
   }
}

配置

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

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

選項

config
(string) Babel 配置檔案的路徑。預設情況下，Hugo 會在您的專案中查找 babel.config.js。有關這些配置檔案的更多資訊，可以參考這裡的 babel 配置。
minified
(bool) 儘量節省字節以便生成最小檔案
noComments
(bool) 是否將註解寫入生成的輸出（預設為 true）
compact
(bool) 不包含多餘的空白字元和行結束符。如果未設置，預設為 auto。
verbose
(bool) 記錄所有操作
sourceMap
(string) 生成 inline 或 external 的 sourcemap 文件。外部 sourcemaps 會寫入到目標文件中，並加上 “.map” 的副檔名。輸入的 sourcemaps 可以來自 js.Build 或是 node 模組，並會合併成輸出的 sourcemaps。
js.Build IsZero