vite打包迁移rsbuild

1、安装rsbuild包

@rsbuild/core
@rsbuild/plugin-react
@rsbuild/plugin-sass

2、rsbuild.config.js 配置如下

import { defineConfig, loadEnv } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { pluginSass } from '@rsbuild/plugin-sass'
import { dependencies } from './package.json'

function replaceVersion (version) {
  return version.replace(/\^/,'')
}

const reactV = replaceVersion(dependencies.react)
const reactDomV = replaceVersion(dependencies['react-dom'])
const reactRouterDomV = replaceVersion(dependencies['react-router-dom'])

const { publicVars } = loadEnv({ prefixes: ['VITE_'] })


export default defineConfig(({ envMode }) => {

  const staticPath = import.meta.env.VITE_APP_STATIC_PATH
  const externalObj = ['dev', 'test', 'prod'].includes(envMode) ? {
    "react": "React",
    "react-dom": "ReactDOM",
    "react-dom/client": "ReactDOM",
    "@remix-run/router": "RemixRouter",
    "react-router": "ReactRouter",
    "react-router-dom": "ReactRouterDOM"
  } : {}

  const injectGlobalScript = ['dev', 'test', 'prod'].includes(envMode) ? [
    {
      tag: 'script',
      publicPath: false,
      head: false,
      append: false,
      attrs: { src: `${staticPath}/static/react@${reactV},react-dom@${reactDomV},react-router-dom@${reactRouterDomV}/index.js` },
    }
  ] : []

  return {
    source: {
      entry: {
        index: './src/main.tsx'
      },
      define: publicVars
    },
    html: {
      template: './public/index.html',
      title: 'rsbuild',
      inject: 'body',
      scriptLoading: 'blocking',
      tags: [
        ...injectGlobalScript
      ]
    },
    plugins: [pluginReact(), pluginSass()],
    output: {
      externals: externalObj,
      assetPrefix: staticPath
    },
    performance: {
      dnsPrefetch: [staticPath],
      removeConsole: envMode === 'prod'
    },
    server: {
      port: 8081,
      host: '0.0.0.0',
      proxy: {
        '/api': {
          target: 'https://xxx.com',
        }
      }
    }
  }
})

3、import.meta.glob 替换修改

由于rsbuild 不支持该属性，使用import.meta.webpackContext

const context = import.meta.webpackContext('./router/', {  regExp: /\.tsx$/})
context.keys().forEach((item: any) => {  
    const module: any = context(item) 
    console.log(item, module) 
})