resources.Babel

resources.Babel [选项] 资源

resource.Resource

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 列表中的站点配置中：

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 存在一些已知的问题，因此如果您的 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) 从 babel 编译输出内联或外部 source map。外部 source map 将写入到目标中，文件名为输出文件名 + “.map”。输入 source map 可以从 js.Build 和 node 模块中读取，并合并到输出的 source map 中。