随着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还是一个很新的工具，新就意味着解决方案并不是很多，生态还不够成熟，潜在许多坑等等。
作为学习，我认为抉择什么工具都能够，然而理论工作中，还是须要抉择更加稳固，生态更加丰盛的工具。
发表回复