@ craftamap/ esbuilt- plugin- html 页面存档备份,存于互联网档案馆
@craftamap/esbuild-plugin-html 是用来生成 HTML 文件的插件
兴建所有指定的入境点及其
相关文件(例如 .css-文件)自动被注入到 HTML
文档. @craftamap/esbuild-plugin-html 灵感来自
jantimon/html-webpack-插件。 。 。 .
缺少任何特征吗? 请造出一票.
所需资源
此插件至少需要 esbuild v0.12.26. 最小节点版本
支持为Node.js 18.
Deno 官方不支持 - 但是, 据报道插件 与德诺合作.
安装
yarn add -D @craftamap/esbuild-plugin-html
# or
npm install --save-dev @craftamap/esbuild-plugin-html
使用量
此插件通过分析
metafile 建设提供。 这个
metafile包含所有条目Point及其输出文件的信息.
这样,这个插件可以将输入文件映射到其输出文件(javascript as
以及css(英语:css).
craftamap/esbuild-plugin-html 使用该 日记
在引擎盖下从所提供的模板创建您 HTML 的模型。 单位
此模式,所有发现的资源都被注入。 该插件也使用 摇篮
模板 插入自定义用户
数据输入模板.
@craftamap/esbuild-plugin-html 需要设置一些选项
构建脚本 :
outdir必须设定。 html 文件生成于outdir。 。 。 .metafile必须设置为true(如果是,插件会自动做到这一点) 未设置为false(第1段).
qq: 您可以使用 esbuild 设置特定的资源输出名称
entryNames 特性。 当此插件尽量支持时
可以,它可能或可能不可靠。 如果你遇到任何问题,
请创建一张票.
样本配置
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))
配置
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 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
捐款
捐款总是受到欢迎.
现 tsc 用于构建项目.
提交信息应当按照 常规武器委员会。 。 。 .
库多斯: 其他 *.html- 弹簧
还有其他的 *.html- 用于建造的插座。 这些工作不同
比起来 @craftamap/esbuild-plugin-html也许更适合你
- @ esbuilder/html (帮助) - 说吧
基于加载器的办法(使用)
*.html- 文件作为切入点,然后开始 子进程为esbuild(中文(简体) ) - @chialab/sbuild-plugin-html 页面存档备份,存于互联网档案馆 页面存档备份,存于互联网档案馆
- 基于装载机的办法