# @craftamap/esbuild-plugin-html 中文文档

规范地址：https://npmcn.com/package/%40craftamap/esbuild-plugin-html/

版本：0\.9\.0
npm 元数据更新时间：2025-03-16T20:43:56.365Z
中文译文更新时间：2026-11-10T22:53:19.181Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40craftamap/esbuild-plugin-html
原文对照：https://npmcn.com/package/%40craftamap/esbuild-plugin-html/?lang=original
源码仓库：https://github.com/craftamap/esbuild-plugin-html

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27.6 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=18
- 运行依赖：2 个
- peer 依赖：esbuild \>=0\.15\.10
- 首次发布：2021-09-19T17:18:06.743Z
- 最新版本发布：2025-03-16T20:43:56.203Z
- 近 30 天下载量：328332（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

[![npm](https://img.shields.io/npm/v/@craftamap/esbuild-plugin-html?color=green&style=flat-square)](https://www.npmjs.com/package/@craftamap/esbuild-plugin-html)

## 安装

```sh
npm install @craftamap/esbuild-plugin-html
```

也可以使用：`pnpm add @craftamap/esbuild-plugin-html`、`yarn add @craftamap/esbuild-plugin-html`、`bun add @craftamap/esbuild-plugin-html`

## README

# @ craftamap/ esbuilt- plugin- html 页面存档备份,存于互联网档案馆

[![npm](https://img.shields.io/npm/v/@craftamap/esbuild-plugin-html?color=green&style=flat-square)](https://www.npmjs.com/package/@craftamap/esbuild-plugin-html)

![Simple banner containing the name of the project in a html self-closing tag](https://npmcn.com/package/%40craftamap/esbuild-plugin-html/.github/banner.png)

`@craftamap/esbuild-plugin-html` 是用来生成 HTML 文件的插件 [兴建](https://esbuild.github.io/)所有指定的入境点及其 相关文件(例如 `.css`\-文件)自动被注入到 HTML 文档. `@craftamap/esbuild-plugin-html` 灵感来自 [jantimon/html-webpack-插件](https://github.com/jantimon/html-webpack-plugin)。 。 。 .

缺少任何特征吗? [请造出一票.](https://github.com/craftamap/esbuild-plugin-html/issues/new)

## 所需资源

此插件至少需要 `esbuild` v0.12.26. 最小节点版本 支持为Node.js 18.

Deno 官方不支持 - 但是, 据报道插件 与德诺合作.

## 安装

```bash
yarn add -D @craftamap/esbuild-plugin-html
# or
npm install --save-dev @craftamap/esbuild-plugin-html
```

## 使用量

此插件通过分析 [`metafile`](https://esbuild.github.io/api/#metafile) 建设提供。 这个 metafile包含所有条目Point及其输出文件的信息. 这样,这个插件可以将输入文件映射到其输出文件(javascript as 以及css(英语:css).

`craftamap/esbuild-plugin-html` 使用该 [日记](https://github.com/jsdom/jsdom) 在引擎盖下从所提供的模板创建您 HTML 的模型。 单位 此模式,所有发现的资源都被注入。 该插件也使用 [摇篮 模板](https://lodash.com/docs/4.17.15#template) 插入自定义用户 数据输入模板.

`@craftamap/esbuild-plugin-html` 需要设置一些选项 构建脚本 :

-   `outdir` 必须设定。 html 文件生成于 `outdir`。 。 。 .
-   `metafile` 必须设置为 `true` (如果是,插件会自动做到这一点) 未设置为 `false` (第1段).

qq: 您可以使用 esbuild 设置特定的资源输出名称 `entryNames` 特性。 当此插件尽量支持时 可以,它可能或可能不可靠。 如果你遇到任何问题, [请创建一张票.](https://github.com/craftamap/esbuild-plugin-html/issues/new)

### 样本配置

```javascript
const esbuild = require('esbuild');
const { htmlPlugin } = require('@craftamap/esbuild-plugin-html');

const options = {
    entryPoints: ['src/index.jsx'],
    bundle: true,
    metafile: true, // needs to be set
    outdir: 'dist/', // needs to be set
    plugins: [
        htmlPlugin({
            files: [
                {
                    entryPoints: [
                        'src/index.jsx',
                    ],
                    filename: 'index.html',
                    htmlTemplate: `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            <body>
                <div id="root">
                </div>
            </body>
            </html>
          `,
                },
                {
                    entryPoints: [
                        'src/auth/auth.jsx',
                    ],
                    filename: 'auth.html',
                    title: 'Login',
                    scriptLoading: 'module',
                    favicon: './public/favicon.ico',
                    hash: true,
                },
                {
                    entryPoints: [
                        'src/installation/installation.jsx',
                    ],
                    filename: 'installation.html',
                    title: 'title',
                    scriptLoading: 'module',
                    define: {
                        "version": "0.3.0",
                    },
                    htmlTemplate: `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            <body>
                You are using version <%- define.version %>
                <div id="root">
                </div>
            </body>
            </html>
          `,
                },
            ]
        })
    ]
}

esbuild.build(options).catch(() => process.exit(1))
```

### 配置

```typescript
interface Configuration {
    files: HtmlFileConfiguration[],
}

interface HtmlFileConfiguration {
    filename: string,           // Output filename, e.g. index.html. This path is relative to the out dir
    entryPoints: string[],      // Entry points to inject into the created html file, e.g. ['src/index.jsx']. 
                                // Multiple entryPoints are possible.
    title?: string,             // title to inject into the head, will not be set if not specified
    htmlTemplate?: string,      // custom html document template string. If you omit a template, 
                                // a default template will be used (see below)
                                // can also be a relative path to an html file
    define?: Record<string, string>,
                                // Define custom values that can be accessed in the lodash template context
    scriptLoading?: 'blocking' | 'defer' | 'module', 
                                // Decide if the script tag will be inserted as blocking script tag, 
                                // with `defer=""` (default) or with `type="module"`
    favicon?: string,           // path to favicon.ico. If not specified, no favicon will be injected
    findRelatedCssFiles?: boolean,
                                // Find related output *.css-files and inject them into the html. 
                                // Defaults to true.
    findRelatedOutputFiles?: boolean,
                                // Find output files following the same name schema of the output file 
                                // like (*.css)-files and inject them into the html. This option is deprecated,
                                // consider using findRelatedCssFiles.
                                // Defaults to false.
    inline?: boolean | {        // Inline all js and css entry points into the html file.
        js?: boolean,           // Inline all js resources into the html file. 
        css?: boolean,          // Inline all css resources into the html file.
    } | ((filepath: string) => boolean), // Inline resources by custom function.
                                // Not set by default - will not inline any resources.
    extraScripts?: (string | {  // accepts an array of src strings or objects with src and attributes
        src: string;            // src to use for the script
        attrs?: { [key: string]: string } // attributes to append to the script, e.g. { type: 'module', async: true }
    })[],
    hash?: boolean | string,    // Append a hash to all included scripts and CSS files for cache-busting. The
                                // hash is based on the given string. If given a boolean, the hash is based on
                                // the current time.
}
```

情况a `publicPath` 正在安装配置中指定, `esbuild-plugin-html` 将使用绝对路径 `publicPath`。 。 。 .

您也可以通过改变 Esbuild 的动词来改变插件的动词.

#### 默认 HTML 模板

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
  </body>
</html>
```

## 捐款

捐款总是受到欢迎.

现 `tsc` 用于构建项目.

提交信息应当按照 [常规武器委员会](https://www.conventionalcommits.org/en/v1.0.0/)。 。 。 .

## 库多斯: 其他 `*.html`\- 弹簧

还有其他的 `*.html`\- 用于建造的插座。 这些工作不同 比起来 `@craftamap/esbuild-plugin-html`也许更适合你

-   [@ esbuilder/html (帮助)](https://www.npmjs.com/package/@esbuilder/html) - 说吧 基于加载器的办法(使用) `*.html`\- 文件作为切入点,然后开始 子进程为 `esbuild`(中文(简体) )
-   [@chialab/sbuild-plugin-html 页面存档备份,存于互联网档案馆 页面存档备份,存于互联网档案馆](https://www.npmjs.com/package/@chialab/esbuild-plugin-html)
    -   基于装载机的办法

## 常见问题

### 如何安装 @craftamap/esbuild-plugin-html？

在项目目录运行 npm install @craftamap/esbuild-plugin-html，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：esbuild（\>=0\.15\.10）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @craftamap/esbuild-plugin-html 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/craftamap\_\_esbuild-plugin-html 是否存在。

### @craftamap/esbuild-plugin-html 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @craftamap/esbuild-plugin-html 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @craftamap/esbuild-plugin-html 可以商用吗？

@craftamap/esbuild-plugin-html 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @craftamap/esbuild-plugin-html 的下载量有多少？

根据 npm 官方下载统计，@craftamap/esbuild-plugin-html 在 2026/10/11 – 2026/11/09 这 30 天内被下载 328,332 次，日均约 10,944 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @craftamap/esbuild-plugin-html 还在维护吗？

最新版本 0\.9\.0 发布于 2025/03/17（1\.7 年前）；至今共发布 15 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/09/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。