resources.Babel

{{ 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。這在 Babel 的某些領域存在已知的 問題，因此如果您的 babel.config.js 位於 Hugo 模組中（而非專案本身），我們建議使用 require 來加載 presets/plugins，例如：

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 中。
resources.ByType Resources