背景

旧项目使用 webpack4 启动， cra 生成，结合 craco 修改配置启动。随着时间推移会出现一些 mjs 文件找不着， module 找不着等等问问，需要额外 loader 等。

介于启动问题比较多，决定使用 - Vite 启动

新增加依赖

yarn add vite @vitejs/plugin-react-refresh -D

启动方式修改

start: craco start 
dev: vite --host 自定义host

配置添加 vite.config.ts

import reactRefresh from "@vitejs/plugin-react-refresh";
    import path from "path";
    import { defineConfig } from "vite";
    const projectRootDir = path.resolve(__dirname);

    export default defineConfig({
      plugins: [reactRefresh()], 
      resolve: {
        alias: {
          index: path.resolve(projectRootDir, "src/index.tsx"),
          $models: path.resolve(projectRootDir, "src/models/"),
          // 项目 alais 配置
        },
      },
      define: {
        global: "window",
        "process.env": process.env,
      },
      optimizeDeps: {
        esbuildOptions: {
          tsconfig: "./tsconfig.json",
        },
        // esbuildOptions: {
        //   tsconfigRaw: {
        //     compilerOptions: {
        //       experimentalDecorators: true,
        //       emitDecoratorMetadata: true,
        //     }
        //   }
        // },
      },
      esbuild: {
        tsconfigRaw: {
          compilerOptions: {
            experimentalDecorators: true,
            emitDecoratorMetadata: true,
          },
        },
      },
      build: {
        outDir: "dist",
      },
    });

入口文件 index.html 添加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/docs/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root" style="height: 100vh">
      <script type="module" src="/src/index.tsx"></script>
    </div>
  </body>
</html>

具体配置参考 vitejs.dev/config/

1.碰到问题

cjs in es 都改成 esmodule
core-decorators ^0.16.0 版本报错升级 ^0.20.0 能解决问题

旧项目改造使用 Vite 启动

背景