乐趣区

关于前端:从createreactapp迁移到vite

jiezi

随着 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 还是一个很新的工具，新就意味着解决方案并不是很多，生态还不够成熟，潜在许多坑等等。

作为学习，我认为抉择什么工具都能够，然而理论工作中，还是须要抉择更加稳固，生态更加丰盛的工具。

退出移动版