# esbuild-plugin-html
**Repository Path**: we_coder/esbuild-plugin-html
## Basic Information
- **Project Name**: esbuild-plugin-html
- **Description**: 基于ejs模板引擎esbuild模板插件
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-09
- **Last Updated**: 2023-03-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
使用ejs作为模板引擎的esbuild html模板插件
## 安装
`npm install -D @fallen_leaves/esbuild-plugin-html`
## 使用
如果设置`format: 'esm'`, js文件会以``模式加载
```js
// 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: './'
})
]
})
```
## 配置项
### `template`
`Type: String`
`Default: .....`
html模板字符串或者模板文件绝对路径，支持ejs语法。例如：
```js
// 1.文件路径
esbuildPluginHtml({
template: 'public/index.html'
})
// 2.模板字符串
esbuildPluginHtml({
template: `
<%= title%>
`
})
```
### `minify`
`Type: Boolean | MinifyOptions`
`Default: true`
是否对html文本内容进行压缩。详细配置请查看[MinifyOptions](https://www.npmjs.com/package/html-minifier-terser?activeTab=readme)
```js
// 1.布尔值控制
esbuildPluginHtml({
minify: false // true
})
// 2.详细配置
esbuildPluginHtml({
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
...
}
})
```
### `filename`
`Type: String`
`Default: 'index.html'`
模板文件输出路径及文件名称。
```js
esbuildPluginHtml({
filename: './path/to/output.html'
})
```
### `compile`
`Type: Boolean`
`Default: true`
是否编辑ejs语法，配合`renderData`字段使用。
### `renderData`
`Type: Record`
`Default: {}`
设置要注入给ejs模板的数据。使用方法见
```js
esbuildPluginHtml({
compile: true, // false
renderData: {
title: '鸡你太美'
}
})
```
原始模板：
```html
<%= title%>
```
输出后：
```html
鸡你太美
```
### `publicPath`
`Type: String`
`Default: '/'`
设置输出后script、link标签的公共路径
```js
esbuildPluginHtml({
publicPath: 'https://www.cdn-domain.com/'
})
```
输出结果：
```html
title
```
### `preload`
`Type: LinkItem[]`
`Default: false`
预加载地址列表
```ts
type LinkItem = {
href: string // 预加载地址
as: 'script' | 'stylesheet' | 'map' | 'icon' // 预加载文件用途
iconType?: string //.e.g 'image/png'
enableESM?: boolean // 默认 false, 如果为 true, 编译后为