随着vue3的公布，带来了新的打包工具Vite，作为前端的一员，天然得体验一番。因为工作中react用的比拟多，创立我的项目根本都是通过 create-react-app （CRA）来创立。那么通过CRA创立react我的项目的怎么迁徙到vite呢？以下将带大家理解一下如何将一个react我的项目从CRA迁徙到vite:
初始设置
关上一个通过CRA创立的react我的项目
首先装置vite:
// npmnpm install vite// yarnyarn add vite而后更新 npm scripts:
"scripts": {- "start": "react-scripts start",- "build": "react-scripts build",+ "start": "vite",+ "build": "vite build", "test": "react-scripts test",接下来须要批改 public/index.html 文件，起因官网文档有阐明
将./public目录下index.html移到根目录下，同时增加script标签，src指向入口文件，如果html中有任何%PUBLIC_URL%/，将它改为/。起因官网下面的文档中有阐明。以下是我这边的改变
diff --git a/public/index.html b/index.htmlsimilarity index 88%rename from public/index.htmlrename to index.htmlindex aa069f2..dd43c8b 100644--- a/public/index.html+++ b/index.html@@ -2,19 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8" />- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />+ <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" />- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />+ <link rel="apple-touch-icon" href="/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />+ <link rel="manifest" href="/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build.@@ -29,6 +29,7 @@ <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>+ <script type="module" src="/src/index.tsx"></script> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page.Typescript 反对
到目前为止，我的我的项目还没法run起来。次要是vite并不了解tsconfig.json 中 include 属性应用的绝对路径导入。解决办法是装置一个vite-tsconfig-paths的插件来反对typescript的门路映射 。
// npmnpm install vite-tsconfig-paths// yarnyarn add vite-tsconfig-paths装置实现后，在根目录增加vite.config.ts
import { defineConfig } from "vite";import tsConfigPaths from "vite-tsconfig-paths";export default defineConfig({ build: { outDir: "build" }, plugins: [tsConfigPaths()]});这里咱们的输入目录设置为build，而不是默认的dist，是为了和CRA保持一致。
当初咱们的我的项目就能够通过vite跑起来了。
Jest 反对
因为咱们筹备从我的项目中移除react-scripts，所以咱们须要解决怎么不通过react-scripts test来运行Jest测试。
咱们须要借助于ts-jest，增加依赖
// npmnpm install ts-jest// yarnyarn add ts-jest而后再jest.config.js中增加ts-jest的preset:
module.exports = { preset: "ts-jest", setupFilesAfterEnv: ["<rootDir>src/setupTests.ts"], moduleDirectories: ["node_modules", "src"], moduleNameMapper: { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js", "\\.(css|less|scss|sass)$":"<rootDir>/tests/__mocks__/styleMock.js" }}留神，因为react我的项目中能够import css/png之类的文件，然而jest会将其视为js导入，会导致测试失败，所以咱们须要针对这种状况做解决，就是moduleNameMapper所做的，参考 Jest解决动态资源。
在tests/__mocks__/目录下增加fileMock.js和styleMock.js
// fileMock.jsmodule.exports="test-file-stub"// styleMock.jsmodule.exports = {}更新package.json
"scripts": { "start": "vite", "build": "vite build",- "test": "react-scripts test",+ "test": "jest",收尾工作
既然咱们曾经将react我的项目通过vite来构建了，那么CRA相干的依赖也都能够移除了，我这边只须要移除react-scripts就能够了，理论须要依据本人的我的项目来确定
// npmnpm uninstall react-scripts// yarnyarn remove react-scripts总结
整体下来咱们做了一些工作，在开发环境，通过vite来启动整体快了很多。
对于为什么用vite，官网文档为什么选vite中曾经做出了阐明。
然而，毕竟vite还是一个很新的工具，新就意味着解决方案并不是很多，生态还不够成熟，潜在许多坑等等。
作为学习，我认为抉择什么工具都能够，然而理论工作中，还是须要抉择更加稳固，生态更加丰盛的工具。