@fallen_leaves/esbuild-plugin-html
Advanced tools
Readme
使用ejs作为模板引擎的esbuild html模板插件
npm install -D @fallen_leaves/esbuild-plugin-html
如果设置format: 'esm', js文件会以<script type="module" src="output/output.js"></script>模式加载
// esbuild.config.js
import { build } from 'esbuild'
import esbuildPluginHtml from '@fallen_leaves/esbuild-plugin-html'
build({
entryPoints: ['src/main.js'],
outfile: 'output/static/main.js',
format: 'iife', // 'esm'
bundle: true,
sourcemap: true,
plugins: [
esbuildPluginHtml({
template: 'public/index.html',
minify: true,
compile: true,
filename: 'output/index.html',
renderData: {
title: 'title'
},
publicPath: './'
})
]
})
templateType: String
Default: <!DOCTYPE html><html lang="en">.....
html模板字符串或者模板文件绝对路径，支持ejs语法。例如：
// 1.文件路径
esbuildPluginHtml({
template: 'public/index.html'
})
// 2.模板字符串
esbuildPluginHtml({
template: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title%></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
`
})
minifyType: Boolean | MinifyOptions
Default: true
是否对html文本内容进行压缩。详细配置请查看MinifyOptions
// 1.布尔值控制
esbuildPluginHtml({
minify: false // true
})
// 2.详细配置
esbuildPluginHtml({
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
...
}
})
filenameType: String
Default: 'index.html'
模板文件输出路径及文件名称。
esbuildPluginHtml({
filename: './path/to/output.html'
})
compileType: Boolean
Default: true
是否编辑ejs语法，配合renderData字段使用。
renderDataType: Record<string, any>
Default: {}
设置要注入给ejs模板的数据。使用方法见
esbuildPluginHtml({
compile: true, // false
renderData: {
title: '鸡你太美'
}
})
原始模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title%></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
输出后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鸡你太美</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
publicPathType: String
Default: '/'
设置输出后script、link标签的公共路径
esbuildPluginHtml({
publicPath: 'https://www.cdn-domain.com/'
})
输出结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="https://www.cdn-domain.com/output/static/main.css">
<link href="https://www.cdn-domain.com/output/static/main.css.map">
<link href="https://www.cdn-domain.com/output/static/main.js.map">
</head>
<body>
<div id="app"></div>
<script src="https://www.cdn-domain.com/output/static/main.js"></script>
</body>
</html>
preloadType: LinkItem[]
Default: false
预加载地址列表
type LinkItem = {
href: string // 预加载地址
as: 'script' | 'stylesheet' | 'map' | 'icon' // 预加载文件用途
iconType?: string //.e.g 'image/png'
enableESM?: boolean // 默认 false, 如果为 true, 编译后为<script type="module">
}
esbuildPluginHtml({
preload: [{
href: 'https://www.cdn-domain.com/static/sdk.js'
as: 'script',
enableESM: true
}]
})
输出结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="https://www.cdn-domain.com/output/static/main.js"></script>
</body>
</html>
chunksType: string[] | undefined
Default: undefined
当使用splitting: true时，选择要加载的chunk列表, 不设置chunks或者值为[]时，则加载全部输出结果
// esbuild.config.js
import { build } from 'esbuild'
import esbuildPluginHtml from '@fallen_leaves/esbuild-plugin-html'
build({
entryPoints: ['src/main.js'],
outdir: 'output/static',
format: 'esm',
bundle: true,
sourcemap: true,
splitting: true,
plugins: [
esbuildPluginHtml({
template: 'public/index.html',
filename: 'output/index.html',
chunks: ['main', 'async-module']
})
]
})
源码：
// async-module.js
export default asyncModule = 'async module'
// main.js
const asyncModule = (async () => await import('./async-module.js'))()
asyncModule.then(res => {
console.log(res.default)
})
输出结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="path/to/main.js"></script>
<script type="module" src="path/to/async-module.js"></script>
</body>
</html>
FAQs
An esbuild html-template that uses ejs as a template engine
The npm package @fallen_leaves/esbuild-plugin-html receives a total of 1 weekly downloads. As such, @fallen_leaves/esbuild-plugin-html popularity was classified as not popular.
We found that @fallen_leaves/esbuild-plugin-html demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.