github 地址: github.com/noahlam/vit...
介绍
支持 Vite 打包/开发时, 一个 HTML 文件里存在多个 JS(TS) 入口, 并且都可以被构建, 最终构建产物放在同一个目录下.
使用
安装
shell
npm i vite-plugin-multiple-entries -D
yarn add vite-plugin-multiple-entries -D
pnpm add vite-plugin-multiple-entries -D文件引入
js
export default defineConfig({
plugins: [
multipleEntryFilePlugin({
chunkName: 'other',
entryPath: resolve('./other.ts'),
injectTo: 'body-prepend',
}),
],
});参数说明
chunkName
类型: string
默认值: 无
必填: 是
说明: 入口名称, 会影响最终产物的文件名
entryPath
类型: string
默认值: 无
必填: 是
说明: 入口文件路径
entryFileName
类型: string
默认值: 无
必填: 否
说明: 同 rollupOptions.output.entryFileNames 配置, 会影响最终产物的文件名, 作用是当指定了 rollupOptions.output.entryFileNames 时, 所有的入口文件都会被这个规则覆盖. 导致所有入口文件名除了 hash 不一样外, 其他的都一样. 指定 entryFileName 可以为当前 entry 指定一个单独的文件名规则.
crossorigin
类型: string
默认值: 无
必填: 否
说明: 注入的 script 标签是否需要加 crossorigin 字段
示例:
js
export default defineConfig({
plugins: [
multipleEntryFilePlugin({
chunkName: 'other',
entryPath: resolve('./other.ts'),
crossorigin: 'anonymous',
}),
],
});
html
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<script type="module" crossorigin src="/assets/index-22c3b48c.js"></script>
</head>
<body>
<script src="assets/other-cc41acd1.js" crossorigin="anonymous"></script>
<div id="app"></div>
</body>
</html>injectTo
类型: 'head' | 'body' | 'head-prepend' | 'body-prepend'
默认值: head-prepend
必填: 否
说明: 注入位置, 会影响最终产物在 HTML 中的位置
insertPlaceholder
类型: string
默认值: 无
必填: 否
说明: 插入占位符, 最终会被替换成 script 标签, 需要确保在 HTML 文件里有该内容
示例:
html
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- other script placeholder -->
<meta http-equiv="x-dns-prefetch-control" content="on" />
</head>
<body>
<div id="app"></div>
<script type="module" src="index.ts"></script>
</body>
</html>
javascript
export default defineConfig({
plugins: [
multipleEntryFilePlugin({
chunkName: 'other',
entryPath: resolve('./other.ts'),
insertPlaceholder: '<!-- other script placeholder -->',
}),
],
});构建结果:
html
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/assets/other-cc41acd1.js"></script>
<meta http-equiv="x-dns-prefetch-control" content="on" />
<script type="module" crossorigin src="/assets/index-22c3b48c.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>