用于自动识别入口的 vite 插件,支持多入口。
虽然 vite 支持多页面应用,但是需要在对应的路径上放置 index.html
文件,并且需要在 build.rollupOptions.input
中配置好各个入口点,具体说明参考 vite 文档。这些配置略显麻烦,并且有点奇怪,所以我写了这个插件,以我认为的更优雅的方式来解决这个问题。
默认情况下,插件会扫描 src
下的 main.{js,jsx,ts,tsx}
作为页面入口文件。你并不需要在对应的路径上放置 index.html
,因为插件自带了一个非常简单的 html 文件,并且会自动设置好 JavaScript 入口。当然,你还是可以很方便地自定义 html,详见自定义 html。
在 vite.config.ts 中配置插件:
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import conventionalEntries from 'vite-plugin-conventional-entries';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), conventionalEntries()],
});
例如:
// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
export default function App() {
return <div>Hello World</div>;
}
插件会自动把该组件挂载到 root 节点上。
如果想自定义挂载逻辑,例如挂载到非 root 节点,或者在挂载前进行一些额外处理,可以在 main.tsx
的同级目录下创建 entry.client.tsx
:
// src/entry.client.tsx.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './main';
// 挂载到 app 节点
const appEl = document.getElementById('app');
ReactDOM.createRoot(appEl).render(<App />);
为什么文件名是
entry.client.tsx
,而不是直接entry.tsx
?因为在 SSR 场景下可能还会有entry.server.tsx
,这样名称能更统一。
在入口文件 main.js
的同级目录下,支持创建下面四种 html 片段:
- head.html
- body.html
- head-prepend.html
- body-prepend.html
这些 html 片段会被插件注入到 html 模板的相应位置上。默认的 html 模板如下,head
、body
、head-prepend
、body-prepend
的位置也标注出来了:
<!DOCTYPE html>
<html>
<head>
<!-- head-prepend.html -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- head.html -->
</head>
<body>
<!-- body-prepend.html -->
<noscript>
We're sorry but react app doesn't work properly without JavaScript
enabled. Please enable it to continue.
</noscript>
<div id="root"></div>
<!-- body.html -->
</body>
</html>
如果想完全自定义 html 模板,可以在入口文件的同级目录下创建 index.html
,这样插件就会直接使用该 html,而不是上述的默认 html。
对于多页面应用,如果想使用同一个 html 模板,可以在项目根目录下创建 index.html
,该文件会被用作所有页面的 html 模板。
html 模板的优先级为:与入口文件同级的 index.html > 项目根目录下的 index.html > 插件内置的默认 html。
指定目录来扫描入口文件,默认是 src
。这个配置会影响生成的入口路由,假设目录结构如下:
- vite.config.ts
- src/
- main.ts
那么在访问 /
时会获取到 src/main.ts
。而如果把 src
设置为项目根目录,那么就需要访问 /src
才会获取到 /src/main.ts
了。
设置入口文件的 glob 规则,默认是 **/main.{js,jsx,ts,tsx}
。
设置入口的基础路径。