共计 3311 个字符，预计需要花费 9 分钟才能阅读完成。
随着 vue3 的公布，带来了新的打包工具 Vite，作为前端的一员，天然得体验一番。因为工作中 react 用的比拟多，创立我的项目根本都是通过 create-react-app（CRA）来创立。那么通过 CRA 创立 react 我的项目的怎么迁徙到 vite 呢？以下将带大家理解一下如何将一个 react 我的项目从 CRA 迁徙到 vite:
初始设置
关上一个通过 CRA 创立的 react 我的项目
首先装置 vite:
// npm
npm install vite
// yarn
yarn 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.html
similarity index 88%
rename from public/index.html
rename to index.html
index 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 的门路映射。
// npm
npm install vite-tsconfig-paths
// yarn
yarn 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，增加依赖
// npm
npm install ts-jest
// yarn
yarn 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.js
module.exports="test-file-stub"// styleMock.js
module.exports = {}更新 package.json
"scripts": {
"start": "vite",
"build": "vite build",
- "test": "react-scripts test",
+ "test": "jest",收尾工作
既然咱们曾经将 react 我的项目通过 vite 来构建了，那么 CRA 相干的依赖也都能够移除了，我这边只须要移除 react-scripts 就能够了，理论须要依据本人的我的项目来确定
// npm
npm uninstall react-scripts
// yarn
yarn remove react-scripts总结
整体下来咱们做了一些工作，在开发环境，通过 vite 来启动整体快了很多。
对于为什么用 vite，官网文档为什么选 vite 中曾经做出了阐明。
然而，毕竟 vite 还是一个很新的工具，新就意味着解决方案并不是很多，生态还不够成熟，潜在许多坑等等。
作为学习，我认为抉择什么工具都能够，然而理论工作中，还是须要抉择更加稳固，生态更加丰盛的工具。
