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

news2024/12/23 22:06:00

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.coloradmin.cn/o/1850461.html

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

相关文章

【C++提高编程-11】----C++ STL常用集合算法

🎩 欢迎来到技术探索的奇幻世界👨‍💻 📜 个人主页:一伦明悦-CSDN博客 ✍🏻 作者简介: C软件开发、Python机器学习爱好者 🗣️ 互动与支持:💬评论 &…

vscode插件path-intellisense失效原因

很可能是因为设置中的自动补全部分除了问题。 问题 作者自身是因为使用了copilot之后,感觉vscod自带的自动补全(设置里面叫"建议",或者inttelisense)就没必要了,然后一通改设置把建议关掉之后发现插件path-intellisense也不能用了…

CATIA_DELMIA_V5R2019安装包下载及安装教程破解

以下为V5-6R2019安装说明 1.将两卷安装文件解压到同一目录内,互相覆盖即可 (按用户需要下载 CATIA 或者DELMIA) 以上为 CATIA 的安装包 以上为 DELMIA 的安装包 两者合并到一起,同一目录 2.解压后运行setup.exe 如遇到报错&…

[信号与系统]关于LTI系统的转换方程、拉普拉斯变换和z变换

前言 本文还是作为前置知识。 LTI系统的传递函数 LTI系统的传递函数 H ( z ) H(z) H(z) 是输出信号的z变换 Y ( z ) Y(z) Y(z) 与输入信号的z变换 X ( z ) X(z) X(z) 的比值: H ( z ) Y ( z ) X ( z ) H(z) \frac{Y(z)}{X(z)} H(z)X(z)Y(z)​ 多项式比值表…

【实战分享】雷池社区版助力构建高可用、安全的Web应用架构

引言 在日益复杂的网络环境中,构建坚不可摧的安全防线成为每一位网站守护者的重要使命。本文将深入剖析一套集CDN加速、高效Nginx代理与雷池WAF深度防护于一体的现代网站安全架构设计,特别强调雷池WAF在此架构中的核心作用及其对整体安全性的提升策略。…

作为一名程序员,怎么才能写出简洁实用还漂亮的代码楼呢?这25个超惊艳的Python代码写法,你一定要学会!

前言 Python可以用于复杂的数据分析和Web开发项目,还能以极少的代码行数完成令人惊叹的任务。本文将分享25个简短的Python代码示例,用来展示Python编程语言的魅力和效率。 1.列表推导式 Python的列表推导式提供了一种优雅的方法来创建列表。 # 将一个…

渗透测试-若依框架的杀猪交易所系统管理后台

前言 这次是带着摸鱼的情况下简单的写一篇文章,由于我喜欢探究黑灰产业,所以偶尔机遇下找到了一个加密H币的交易所S猪盘,我记得印象是上年的时候就打过这一个同样的站,然后我是通过指纹查找其它的一些站,那个站已经关…

高通安卓12-在源码中查找应用的方法

1.通过搜索命令查找app 一般情况下,UI上看到的APP名称会在xml文件里面定义出来,如 搜索名字为WiGig的一个APP 执行命令 sgrep "WiGig" 2>&1|tee 1.log 将所有的搜索到的内容打印到log里面 Log里面会有一段内容 在它的前面是这段内…

针对 AI 优化数据湖仓一体:使用 MinIO 仔细了解 RisingWave

RisingWave 是现代数据湖仓一体处理层中的开源流数据库,专为性能和可扩展性而构建。RisingWave 旨在允许开发人员在流数据上运行 SQL。鉴于 SQL 是数据工程的通用语言,此功能非常重要。它具有强大的架构,包括计算节点、元节点和压缩器节点&am…

Docker可视化web工具

docker run --restart always --name docker.ui -d -v /var/run/docker.sock:/var/run/docker.sock -p 8989:8999 joinsunsoft/docker.ui #--restart always:重启策略,只要关闭就会重启 http://192.168.10.51:8989 账号:ginghan 密码&#xf…

ruoyi添加自己的菜单

先把自己自定义的view填写好 在菜单管理模块 因为我已经新增过,所以就看看我填的啥就行了 我发现一个问题,路由地址可以填index2或者scooldemo/index2都可以(这个包含了文件夹路径),反正组件路径一定要填对就可以了。 …

Stable Diffusion 插件安装与推荐,助力你的AI绘图

在上一篇文章我们安装了Stable Diffusion ,这篇文章我们来安装Stable Diffusion的插件 Stable Diffusion的插件是绘画中重要的一环,好的插件可以让你的绘画更加得心应手 中英双语插件 为什么要安装中英双语插件呢,不能只安装中文插件吗&…

Android内核编译

前言 本文描述使用Ubuntu 编译Android内核刷入pixel4一些心得和流程。 PC信息: ./o- jackjackyyyyy- -yyyyyy OS: Ubuntu 22.04 jammy:////-yyyyyyo Kernel: x86_64 Linux 6.5.0-35-generic. .://-.sss/ Uptime: 1d 5h 4m.:o: //:--:/- …

基于AT89C52单片机的温度报警系统

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/89456321?spm=1001.2014.3001.5503 仿真构造:AT89C52+DS18B20温度模块+三按键+蜂鸣器+四位数码管显示+电源模块。 压缩包构造:源码+仿真图+设计文档+原理图+开题文档+元件…

Apple - Cryptographic Services Guide

本文翻译自:Cryptographic Services Guide(更新时间:2018-06-04 https://developer.apple.com/library/archive/documentation/Security/Conceptual/cryptoservices/Introduction/Introduction.html#//apple_ref/doc/uid/TP40011172 文章目录…

Stable Diffusion部署教程,开启你的AI绘图之路

本文环境 系统:Ubuntu 20.04 64位 内存:32G 环境安装 2.1 安装GPU驱动 在英伟达官网根据显卡型号、操作系统、CUDA等查询驱动版本。官网查询链接https://www.nvidia.com/Download/index.aspx?langen-us 注意这里的CUDA版本,如未安装CUD…

Open WebUI – 本地化部署大模型仿照 ChatGPT用户界面

Open WebUI介绍: Open WebUI 是一个仿照 ChatGPT 界面,为本地大语言模型提供图形化界面的开源项目,可以非常方便的调试、调用本地模型。你能用它连接你在本地的大语言模型(包括 Ollama 和 OpenAI 兼容的 API)&#xf…

物理层(二)

2.2 传输介质 2.2.1 双绞线、同轴电缆、光纤和无线传输介质 传输介质也称传输媒体,是数据传输系统中发送器和接收器之间的物理通路。传输介质可分为:①导向传输介质,指铜线或光纤等,电磁波被导向为沿着固体介质传播:②)非导向传输介质&…

Python武器库开发-武器库篇之ThinkPHP 2.x 任意代码执行漏洞(六十三)

Python武器库开发-武器库篇之ThinkPHP 2.x 任意代码执行漏洞(六十三) PHP代码审计简介 PHP代码审计是指对PHP程序进行安全审计,以发现潜在的安全漏洞和风险。PHP是一种流行的服务器端脚本语言,广泛用于开发网站和Web应用程序。由…

Linux 内核权限提升漏洞CVE-2024-1086三种修复方法

作者介绍:老苏,10余年DBA工作运维经验,擅长Oracle、MySQL、PG数据库运维(如安装迁移,性能优化、故障应急处理等) 公众号:老苏畅谈运维 欢迎关注本人公众号,更多精彩与您分享。一、漏…