一个支持 Vite 在一个 html 文件里面引入多个 js 入口文件的插件

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>
相关推荐
子兮曰2 天前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
拜无忧4 天前
【教程】vue+vite+ts创建一个最新的高性能后台项目架构
vue.js·typescript·vite
wallflower20204 天前
🚀 从 Webpack 到 Vite:企业级前端构建、代码分割与懒加载优化完全指南
webpack·vite
Java陈序员5 天前
GitHub 星标太多管不过来?这款 AI 工具帮你一键整理、智能搜索!
react.js·openai·vite
前端李二牛6 天前
我被vite-plugin-style-import硬控了两个小时
前端·vite
月弦笙音6 天前
【Vite】vite常用配置,一篇即可通吃
前端·性能优化·vite
伍哥的传说6 天前
Vite 插件 @vitejs/plugin-legacy 深度解析:旧浏览器兼容指南
vite·前端开发·vue3.js·polyfill·plugin-legacy·core-js·ie 11
萌萌哒草头将军7 天前
Nuxt 4.1 版本新功能速览!支持 rolldown-vite 了!
vue.js·vite·nuxt.js
天蓝色的鱼鱼7 天前
为什么 Vite 选择 Rolldown?一次关于性能、生态与未来的深度权衡
前端·vite
萌萌哒草头将军8 天前
VoidZero 公司 8 月动态回顾 🚀🚀🚀
javascript·vue.js·vite