Vite-plugin-auto-mpa-html NPM

快速使用

npm i vite-plugin-auto-mpa-html@latest -D # Or yarn/pnpm as you like

安装完成后，在vite.config.(js/ts)里加入插件，

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import autoMpaHtmlPlugin from 'vite-plugin-auto-mpa-html'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), autoMpaHtmlPlugin({
    entryName: "main.tsx",
    sharedData: {},
    enableDevDirectory: true, // 在dev环境下临时渲染一个目录页面
    ejsOption: {}
  })],
})

现在回到项目目录下，以下面这个项目结构为例：

这是一个基于官方模板生成的react-ts项目，index和page2是两个需要独立生成的HTML入口

.
├── package.json
├── package-lock.json
├── public
│   └── vite.svg
├── src
│   ├── index
│   │   ├── App.css
│   │   ├── App.tsx
│   │   ├── assets
│   │   │   └── react.svg
│   │   ├── config.json
│   │   ├── index.css
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   └── page2
│       ├── App.css
│       ├── App.tsx
│       ├── assets
│       │   └── react.svg
│       ├── config.json
│       ├── index.css
│       ├── main.tsx
│       └── vite-env.d.ts
├── templates
│   └── index.html
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

上面的文件树使用了 tree -I "node_modules|dist" > folders.txt 命令。

在每个入口子文件夹下，创建一个 config.json 文件，内容可以参考下面：

{
    "template": "../../templates/index.html", // 从v1版本开始，使用相对路径
    "data": {
        "title": "This is page 2",
        "description": "page 22222222",
        "keywords": "2"
    }
}

由于我们的项目文件是创建在了src的子文件夹下，所以vite.config.(js/ts)需要一些额外的配置来进行适配：
export default defineConfig({
  root: "src", // 避免生成的入口目录中含有src层级
  base: "",
  build: {
    outDir: "../dist", // outDir默认值是与root的相对路径，root改为子目录后，dist需要生成到根目录下，因此需要配置
    emptyOutDir: true,
  }
})

完成配置，现在运行 npm run build，输出目录下就是使用本插件的效果了

提示，本插件在构建过程中会生成一个临时的index.html在各个入口处，请注意避免冲突！

Plugin Options

{
  /**
   * 当调试时，生成一个目录页来方便访问 (旧为`enableDirectoryPage`)
   * @default true
   */
  enableDevDirectory?: boolean
  /**
   * 顶层配置的共享数据，在渲染ejs时会添加到每个入口处。
   * @default {}
   */
  sharedData?: object
  /**
   * EJS的一些配置选项
   * @see {@link https://github.com/mde/ejs#options}
   * @default {}
   */
  ejsOption?: object
  /**
   * 多页项目的每个入口文件名, 例如, Vue项目一般为`main.js`, React项目一般为`main.jsx`.
   * @default "main.js"
   */
  entryName: string
  /**
   * 配置文件名，在版本v1.1.0后，你可以使用js导出一个es module来配置页面，TS暂不支持.
   * @default "config.json"
   */
  configName?: string
  /**
   * 测试特性，键值可能会在版本更新时有改动，请注意！
   */
  experimental?: {
    /**
     * 重命名生成的HTML文件，默认为`index.html`(便于各类静态文件服务)，但是你也可以命名为其他名字。
     * *特殊的，如果你在此配置`.html`，那么HTML文件会置于入口文件的父级，并以入口文件名来命名。但是这个选项不能在你配置的root目录下生效，因为这样做生成的HTMl文件会置于outDir外，进而产生污染。
     */
    customTemplateName?: string
    /**
     * 由于根目录(vite.config.js内配置的root选项)无法自动获取入口名称，默认使用_root作为其module名，你也可以通过这个配置项来自定义。
     */
    rootEntryDistName?: string
  }
}

每个入口页面的单独配置选项

这个文件是放置在每个入口目录的config.json

{
  /**
   * 本页应用模板的*相对*路径
   * @required
   */
  template: string
  /**
   * 本页EJS模板使用的渲染数据，会与顶层配置的sharedData进行合并
   * @default {}
   */
  data?: object
}

// After v1.1.0, you can use `pageConfigGenerator` to dynamically set page config.
import { pageConfigGenerator } from 'vite-plugin-auto-mpa-html'

// pageConfigGenerator accepts direct cofig object, function, and even Promise.
export default pageConfigGenerator({
  "template": "../../template/index.html"
})

局限

多层级的多页应用从v1版本开始支持，但构建过程需要生成临时的HTML文件，请注意是否与目录结构有冲突。
ENV文件只支持项目根目录，每页单独的env文件 暂无计划支持。
当 experimental.customTemplateName 配置为 ".html" 时，即希望根据目录名称自动生成对应名称的html文件，此时如果根目录有符合条件的入口文件，构建将会失败，以避免生成到outDir目录外，污染其他项目。

Vite自身特性

环境变量和模式(Vite v4.2+)

构建

git clone https://github.com/iamspark1e/vite-plugin-auto-mpa-html.git
cd vite-plugin-auto-mpa-html
npm install
# npm run test # 建议在发起合并前，先本地进行单元测试😊
npm run build