深圳住房和建设局网站无法登陆,视频网站建站免费,网站建设基本,wordpress 仿站步骤[react]脚手架create-react-app/vite与reac项目 环境问题描述create-react-app 脚手架根据脚手架修改项目结构安装脚手架注入配置文件-config文件夹package.json文件变更删除 serviceWorker.js新增reportWebVitals.js文件更新index.js文件 脚手架creat-react-app 缺点 vite 脚手… [react]脚手架create-react-app/vite与reac项目 环境问题描述create-react-app 脚手架根据脚手架修改项目结构安装脚手架注入配置文件-config文件夹package.json文件变更删除 serviceWorker.js新增reportWebVitals.js文件更新index.js文件 脚手架creat-react-app 缺点 vite 脚手架初始化脚手架 项目初始化项目包迁移 本人是在react项目升级的过程迁移的脚手架原项目使用的creat-react-app,脚手架升级变更对项目的基本结构修复后项目已经可以正式启动了记录一下
环境
node -v.18.15.0react - 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 react18.2.0 react-dom18.2.0 -D
npm i web-vitals2.1.4 react-scripts2.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-routerredux等其它依赖包时总是需要手动重启项目就比较麻烦想到框架变更并不影响业务代码只是变更的打包等功能以及框架的文件因此直接将脚手架换成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此时项目可以直接运行
