【从0实现React18】 (一) 项目初始化

Multi-repo 和 Mono-repo

由于需要同时管理多个包,如React、React-dom等,所以选择**Mono-repo**

选择使用pnpm-workspace搭建Mono-repo环境的原因

  • 依赖安装快
  • 更规范

Pnpm初始化

npm install -g pnpm
pnpm init

配置pnpm-workspace.yml文件

pnpm-workspace.yaml 文件:

packages:# all packages in direct subdirs of packages/- 'packages/*'

定义开发规范

eslint安装配置

安装

pnpm i eslint -D -w

初始化

npx eslint --init

配置

pretiier 安装配置

安装

pnpm i prettier -D -w

prettier继承到eslint

pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

为lint添加对应的执行脚本

"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages"

commit规范检查

husky

安装husky,用于拦截comiit命令

pnpm i husky -D -w

初始化husky

pnpm husky init

将刚才实现的lint命令纳入comiit时husky将执行的脚本

echo "pnpm lint" > .husky/pre-commit

commitlint

安装commitLint

pnpm i commitlint @commitlint/config-conventional @commitlint/cli -D -w

新建配置文件.commitlintrc.js

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

集成到husky

echo "pnpm dlx commitlint --edit $1" > .husky/commit-msg

打包工具

使用rollup打包

pnpm i -D -w rollup

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/857655.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ai assistant激活成功后,如何使用

ai assistant激活成功后,如图 ai assistant渠道:https://web.52shizhan.cn/activity/ai-assistant 在去年五月份的 Google I/O 2023 上,Google 为 Android Studio 推出了 Studio Bot 功能,使用了谷歌编码基础模型 Codey,Codey 是…

内容安全复习 4 - 深度生成模型

文章目录 概述经典算法自回归模型(Autoregressive model)变分自编码器(VAE)生成对抗网络(GAN)扩散模型(Diffusion model)总结 应用 概述 深度生成模型是一类使用深度学习技术构建的…

红队内网攻防渗透:内网渗透之内网对抗:横向移动篇入口差异切换上线IPC管道ATSC任务Impacket套件UI插件

红队内网攻防渗透 1. 内网横向移动1.1 横向移动入口知识点1.1.1、当前被控机处于域内还是域外1.1.1.1 在域内1.1.1.2 不在域内1.1.1.2.1 第一种方法提权到system权限1.1.1.2.2 第二种方法切换用户上线1.1.1.2.3 kerbrute枚举用户1.1.2、当前凭据为明文密码还是HASH1.2 横向移动…

flink学习-flink sql

动态表 在flink的数据处理中,数据流是源源不断的,是无界的,所以对于flink处理的数据表是一张动态表,所以对于动态表的查询也是持续的,每接收一条新数据会进行一次新的查询。 持续查询 因为数据在一直源源不动的到来…

跟TED演讲学英文:How language shapes the way we think by Lera Boroditsky

How language shapes the way we think Link: https://www.ted.com/talks/lera_boroditsky_how_language_shapes_the_way_we_think? Speaker: Lera Boroditsky Date: November 2017 文章目录 How language shapes the way we thinkIntroductionVocabularySummaryTranscriptA…

【单片机毕业设计选题24020】-全自动鱼缸的设计与应用

系统功能: (1)检测并控制鱼缸水温,水温低于22℃后开启加热,高于28℃后关闭加热。 (2)定时喂食,每天12点和0点喂食一次,步进电机开启后再关闭模拟喂食。 (3&#xff09…

qt 简单实验 一个可以向左侧拖拽缩放的矩形

1.概要 向左拖拽矩形&#xff0c;和向右拖拽不同&#xff0c;向右拖拽是增加宽度&#xff0c;向左拖拽是增加宽度的同时还要向左移动x的坐标。 2.代码 2.1 resizablerectangleleft.h #ifndef RESIZABLERECTANGLELEFT_H #define RESIZABLERECTANGLELEFT_H #include <QWid…

【Matlab】-- BP反向传播算法

文章目录 文章目录 00 写在前面01 BP算法介绍02 基于Matlab的BP算法03 代码解释 00 写在前面 BP算法可以结合鲸鱼算法、飞蛾扑火算法、粒子群算法、灰狼算法、蝙蝠算法等等各种优化算法一起&#xff0c;进行回归预测或者分类预测。 01 BP算法介绍 BP&#xff08;Backpropag…

JMeter的基本使用与性能测试,完整入门篇保姆式教程

Jmeter 的简介 JMeter是一个纯Java编写的开源软件&#xff0c;主要用于进行性能测试和功能测试。它支持测试的应用/服务/协议包括Web (HTTP, HTTPS)、SOAP/REST Webservices、FTP、Database via JDBC等。我们最常使用的是HTTP和HTTPS协议。 Jmeter主要组件 线程组&#xff08…

第五题(共享素数)

题目&#xff1a; from Crypto.Util.number import *flag flag{************}n1 1746971722529083908388605966002077274275237561715501834127389204779337274469841082126757807355155296052496366534644907775881406840930629941212123089008724399493406942466443295217…

Flutter Android 调试桥 (adb)

客户端&#xff1a;用于发送命令。客户端在开发计算机上运行。您可以通过发出 adb 命令从命令行终端调用客户端。 守护程序adbd&#xff1a;用于在设备上运行命令。守护程序在每个设备上作为后台进程运行。 服务器&#xff1a;用于管理客户端与守护程序之间的通信。服务器在开…

Ubuntu常见命令解释

编译类命令 sudo ./configure/sudo make/sudo make install 参考博客这几条命令常见于安装 sudo./configure 命令就是执行当前目录名为configure的脚本&#xff0c;主要的作用是对即将安装的软件进行配置&#xff0c;检查当前的环境是否满足安装软件的依赖关系。 sudo make 命…

移动端的HSR技术

overdraw问题&#xff1a; overdraw顾名思义就是过度绘制&#xff0c;就是在渲染过程中**绘制一帧FBO&#xff08;或者RenderTarget&#xff09;**超过一次相同像素的现象!这个是CG的问题&#xff01;特别在是用来大量的透明混合的情况下会产生的&#xff0c;当然客户端andrio…

mysql分析常用锁、动态监控、及优化思考

这里写自定义目录标题 1.未提交事物&#xff0c;阻塞DDL&#xff0c;继而阻塞所有同表的后续操作,查看未提交事务的进程2.存着正在进行的线程数据。3.根据processlist表中的id杀掉未释放的线程4.查看正在使用的表5.mysql为什么state会有waiting for handler commit6.什么情况导…

jetson nano + IMX219采raw图

研究了一圈&#xff0c;想直接采集raw图&#xff0c;很难。淘宝上直接买的模组&#xff0c;几乎都是直接出isp过后的图&#xff0c;至少有个去马赛克的过程&#xff0c;这就很难采raw了。淘宝上几乎是只能定制。想不到&#xff0c;不需要isp功能的相机模组反而非常难找。通过开…

【深度学习】交叉熵和MSE的理解

先说结论&#xff1a; 原来&#xff0c;他们与维度无关&#xff0c; 只要维度合适&#xff0c;都能计算。哈哈哈哈 测试代码&#xff1a; model Net(10,128,Config.num_output_feat)inputs torch.randn(3,5,10)res model(inputs)# 3X5print(res)label torch.randn(3,5)# lo…

高效开发与调试 RK3568 上的 Android 11:全面指南

目录 介绍环境准备1. 硬件准备2. 软件准备 环境搭建1. 下载并编译 Android 11 源码2. 烧写 Android 11 到 RK3568 高效开发与调试1. 使用 ADB 进行调试USB 连接无线调试 2. 使用 Android Studio 进行开发与调试配置 Android Studio使用 Logcat 查看日志断点调试 3. 使用其他工具…

【Android面试八股文】你能说说View的绘制流程是从Activity的哪个生命周期方法开始执行的?

文章目录 View绘制流程与Activity生命周期详细代码解释总结View绘制流程与Activity生命周期 在Android中,View的绘制流程确实与Activity的生命周期密切相关。 具体来说,视图的绘制通常会在onResume()之后开始,这意味着绘制过程正式启动是在Activity的onResume()方法完成后…

mysql数据库中给表创建数据

mysql数据库中给表创建数据 1、操作流程 1、连接数据库 2、拿到查询游标 3、创建sql 4、运行sql 5、关闭游标2、通用代码 import pymysqldef createData(dataDict,tableName):"""给数据表创建数据:param dataDict: 字典:param tableName: 表名:return: "…

intouch的报警怎么发到企业微信机器人

厂务报警通知系列博客目录 intouch的报警怎么发到微信上 intouch的报警怎么发到邮件上 intouch的报警怎么发到短信上 intouch的报警怎么发到企业微信机器人 intouch的报警怎么发到飞书机器人 intouch的报警怎么用语音通知到手机用户 创建企业微信群机器人 打开企业微信客…