esbuild-html
v1.0.1-rc
Published
esbuild plugin for generate pages html.
Readme
esbuild-html
esbuild plugin for generate pages html.
Like webpack-html-plugin. generate HTML page for the entry-point javascript.
Install
# npm
npm install esbuild-html -D
# yarn
yarn add esbuild-html -DUsage
Simple example
esbuild settings.js
import esbuild from 'esbuild';
import esbuildHTML from 'esbuild-html'
esbuild.build({
entryPoints: [
path.resolve(__dirname, 'index.js'),
path.resolve(__dirname, 'pageA.js'),
path.resolve(__dirname, 'pageB.js'),
],
plugins: [
esbuildHTML({
parameters: {
valueA: '123', valueB: 'xyz'
}
})
],
publicPath: '/www'
});in your entry point file. eg. index.js
define your entry point html template.
import '?public/template.html' // << define the 'index.js' entry point
// << use "public/template.html" file as template
import ReactDOM from 'react-dom'
import React from 'react'
import { VGroup } from 'v-block.layout'
function App() {
return (
<VGroup width="100vw" height="100vh" padding="5px 10px"
horizontal="center" vertical="center">
<h1>ESBuild HTML PLUGIN</h1>
</VGroup>
)
}
ReactDOM.render(<App />, document.getElement('root'));at your project root dir.
your-esbuild-project
|- dist
|- node_modules
|- src
|- public
|- template.html << your html template file
|- package.jsoneg. html template file
<%= [parameter name]%>
// in the settings.js file, esbuildHTML({ parameters:{} });
PS:
<%= styles %> represents the compiled style file with the insertion point inserted here.
<%= script %> represents the compiled jscode file with the insertion point inserted here.
use this template.html
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<%= styles %>
</head>
<body>
<div id="root"></div>
<div><%= valueA %></div>
<%= script %>
</body>
</html>import in index.js will output
<!DOCTYPE html>
<html lang="zh-cn">
<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>index</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
<div>123</div>
<script src="index.js"></script>
</body>
</html>| Name | Type | Default | Description | | ------------- | -------- | ------- | ------------------------------------------------------ | | parameters | {Object} | {} | Allows to overwrite the parameters used in the template |
powered by Zonebond of Oneteams studio F2D (F2D is "front-end design and development" team)
author [email protected]
知乎 https://www.zhihu.com/people/zonebond/posts