resources.Babel

resources.Babel [OPTIONS] RESOURCE

resource.Resource

{{ 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 列表

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 来加载预设/插件，例如：

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) 从 babel 编译输出 inline 或 external sourcemap。外部 sourcemap 将被写入目标位置，文件名为输出文件名 + “.map”。可以从 js.Build 和 node 模块读取输入 sourcemap，并将其合并到输出 sourcemap 中。