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上去了。