[react]脚手架create-react-app/vite与reac项目

本人是在react项目升级的过程迁移的脚手架,原项目使用的creat-react-app,脚手架升级变更对项目的基本结构修复后,项目已经可以正式启动了,记录一下

环境

  • node -v.18.15.0
  • react - 16.9.0

问题描述

随着本地node版本的提升,运行以前的项目遇到了以下问题:

Error: error:0308010C:digital envelope routines::unsupported

网上描述都是因为 node 版本升级导致的,运行的项目比较早会报错,而网上提供的方案大多都是降低 node 版本,实际上我觉的应该是从其它方面修复而不是降低版本???!!!因为我们以后开发的版本都是越来越高的,不可能每次遇到早期的版本都降级node!!!

然后运行命令查看最新的包的情况:

npm outdated

同时发现react也是老版本, react最新版本已经升级到 18.2.0 版本,但是使用的却还是16.9.0 ,那么既然都是升级,也可以顺便升级一下 react 的代码

考虑到react都升级了,当初创建项目的脚手架应该也升级了,所以项目的基本结构可能发生变化,因此先升级脚手架看一下结构是否变化

create-react-app 脚手架

根据脚手架修改项目结构

考虑到基础框架的内容可能也存在变更,并且之前使用的create-react-app脚手架,那么先升级了全局的create-react-app脚手架

安装脚手架

npm i create-react-app -g
create-react-app -V 

发现输出版本是5.0.1是最新版本

然后使用脚手架创建新的项目

create-react-app <react-project-name>

此时比对项目的基本结构,因为demo只是最基础的东西,所以需要查看的仅仅包括 package.json 的变化,一些基础文件的变化,基本不包括业务相关代码

在这里插入图片描述

注入配置文件-config文件夹

npm run eject

考虑到之前config文件夹就是自动注入的,并且没有其它额外的配置,所以将项目中老版本的config文件夹也删除,如果之后需要的话,再生成,也就是可以暂时忽略配置文件,因为没有使用到配置文件的修改

package.json文件变更

根据 package.json 的比对发现运行的脚本发生了变化

首先将运行的脚本:

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
  }

替换为:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

并且根目录下的 scripts 文件夹可以删除了,新版本已经不使用该文件夹了

其次,依赖的变化,以下是新版本demo中的几个依赖,可以此时更新或添加也可以等之后用到的时候再添加,本人采用直接先更新这几个依赖包:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

运行以下命令:

npm i react@18.2.0 react-dom@18.2.0 -D
npm i web-vitals@2.1.4 react-scripts@2.1.4 -D

其它package.json的变化先不考虑了

删除 serviceWorker.js

该文件也是之前脚手架自动生成的一个文件,新脚手架生成的文件中已经没有该文件了,所以删除该文件src/serviceWorker.js,并删除index.js文件对该文件的引用,即以下代码

import * as serviceWorker from './serviceWorker';
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

新增reportWebVitals.js文件

对比发现新增了一个src/reportWebVitals.js文件

reportWebVitals.js

const reportWebVitals = (onPerfEntry) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

然后,在index.js文件中添加该文件的使用

import reportWebVitals from "./reportWebVitals";
reportWebVitals();

感觉就是reportWebVitals文件替换了之前的serviceWorker文件

更新index.js文件

import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
//变更为
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(<App />);

然后可以启动一下项目,根据错误提示进一步修改项目

脚手架creat-react-app 缺点

发现该脚手架并不是非常好用,路由、样式需要自己单独初始化与使用

不可定制使用css的解析器

eject时候注入内容是强制全部添加的

修改某些路由文件的时候都不能实现热部署,需要手动启动这个就比较麻烦了

因此打算找一些其它的脚手架,如果好用就弃用creat-react-app

vite 脚手架

但是开始修复升级的 react-router,redux等其它依赖包时,总是需要手动重启项目就比较麻烦,想到框架变更并不影响业务代码,只是变更的打包等功能,以及框架的文件,因此直接将脚手架换成vite,在之后的调试过程中不用在手动启动项目,比较方便调试包的升级

初始化脚手架 & 项目

npm create vite
等价于
npm i create-vite -g
create-vite <project-name>

初始化项目包

npm i

此时项目已经可以运行,直接将业务代码迁移即可

迁移

  • index.js对应于vite中的main.jsx;基本不用改动;
  • app.js对应于vite中的 app.jsx;直接复制到app.jsx即可;
  • src文件夹中的内容,排除App.test.js, reportWebVitals.js等原脚手架生成的文件,其它业务代码直接复制即可
  • 运行项目,将缺少的包安装即可,最好不要直接复制package.json文件,因为除了脚手架的依赖包,有些配置也不相同了

发现现在react的依赖包也开始区分开发环境与非开发环境了,所以安装依赖包的时候:

# 线上需要的包
npm i <pk> 
# 开发环境需要的包
npm i <pk> -D

此时项目可以直接运行