vite打包react，输出多个js文件

因为需要在RazorPages的局部使用js写部分动态效果，于是折腾一下看看能不能用react来写，没想到还真的可以。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import fs from 'fs'// https://vite.dev/config/const _pathDir = 'src/pages'const pageDir = path.resolve(__dirname, _pathDir)const paths = fs.readdirSync(pageDir, { recursive: true }).map(a => path.resolve(pageDir, a)).map(a => {let name = path.basename(a, path.extname(a))return { name, path: a }}).filter(a => fs.statSync(a.path).isFile())
const inputPaths = Object.fromEntries(paths.map(a => [a.name, a.path]))
export default defineConfig({plugins: [react()],build: {rolldownOptions: {input: {...inputPaths},output: {entryFileNames: (opt) => {let relativePath = path.relative(path.resolve(__dirname, _pathDir), path.dirname(opt.facadeModuleId))if (relativePath === '') {relativePath = '.'}return `${relativePath}/${opt.name}.js`;},}}}
})

在src/pages下的所有jsx文件，都会在dist下输出对应的js文件，可以就可以直接使用挂到对应的dom上去了。