全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]

置顶 已于 2024-02-22 09:34:47 修改
阅读量479 收藏
点赞数
分类专栏： 前端工程化 文章标签： vue vue3 组件库搭建 pnpm workspace 前端工程化 turbo turbopack
于 2024-02-18 20:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alnorthword/article/details/136007567
版权
本文详细介绍了如何使用pnpm monorepo、turbo和相关工具从零开始搭建一个前端工程化项目，涉及环境配置、初始化工程、turbo安装与配置、husky、lint-staged、eslint和prettier的设置，以及项目结构规划。
摘要由CSDN通过智能技术生成

全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]

引言

最近各种原因，生活上的，工作的上的都有，特意在业余时间做一点事情！
这是一个使用 pnpm monorepo 来搭建的demo级别的组件库

相关环境

  • nodejs： node V20.11.0
  • pnpm： pnpm V8.15.0
  • win10： win10 WSL Ubuntu22
  • vscode： V1.85.0
  • git： V2.39.1

在这里插入图片描述

技术栈

选择 pnpm， 正如官网所描述的 “快、省” 优秀的包管理机制，和 workspace 功能，对 monorepo 有良好的支持。monorepo 是一种项目架构，简单的来说：一个

了解本专栏 订阅专栏 解锁全文 超级会员免费看
禅思院
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]
禅思院
02-27 259
本来不想写用的插件单独列出来介绍的，考虑再三还是写吧，正好好好真正的在加深一次印象吧！
一步一步教你搭建monorepo项目架构
fans_x的博客
11-06 875
monorepo 搭建详细教程
搭建vue3组件库(一): Monorepo架构搭建
weixin_43805439的博客
04-26 2283
Monorepo架构搭建
Monorepo（单体仓库）与 MultiRepo（多仓库）: Monorepo 单体仓库开发策略与实践指南
Allen-
07-03 2931
在软件开发中，代码仓库的管理方式对项目的效率和协作有着重要影响。常见的代码仓库管理方式主要有两种：Monorepo（单体仓库）和 MultiRepo（多仓库）。Monorepo（单体仓库）：是指将多个项目存储在同一个代码仓库中。这种方式允许不同项目共享代码和依赖，并在同一个版本控制系统中进行管理。MultiRepo（多仓库）：是指将每个项目存储在独立的代码仓库中，每个仓库独立管理代码和依赖。不同项目之间的代码和依赖需要通过包管理工具或其他方式进行共享。Monorepo（单体仓库）定义。
从0开始搭建一个Monorepo模版，基于Turborepo+pnpm+changesets+dumi
BWater_monster的博客
08-09 2551
基于Turborepo+pnpm+changesets+dumi，搭建的多包组件库模版
【Monorepo实战】pnpm+turbo+vitepress构建公共组件库文档系统
IT飞牛
10-09 1774
Monorepo架构可以把多个独立的前端系统放到一个仓库中去进行联调，这里记录基于pnpm中workspace功能，如何构建将vitepress和组件库进行联调，并且使用turbo进行任务顺序编排。
monorepo在H5项目中的应用(一、项目搭建)
weixin_42608188的博客
09-15 712
monorepo项目在H5中的使用 项目构建
手写Vue3源码——搭建Monorepo环境
weixin_42789698的博客
06-29 23
创建.npmrc文件 创建pnpm-workspace.yaml文件 项目根目录创建packages文件夹 使用pnpm安装我们需要的包 cd到reactivity目录下，执行命令：pnpm init修改创建的package.json 同理，shared文件夹也同样操作创建一个tsconfig.json文件，也可以命令行：pnpm tsc --init...
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]
禅思院
02-19 423
一个好的工程化项目，必然有一个好的文档管理，这样才算称得上一个好的工程化，也大大提高后面的工作和文档查找的效率！
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇三]
禅思院
03-06 354
接上文的全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]，进行详细编写rollup打包脚本
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇四]
禅思院
03-12 341
在这实现第一个组件space[间距]到这里，第一个间隔组件开发完成啦，很简单，按照自己定义的打包规则去处理自己的组件，所以在规则下，开发组件就像自己的开发页面一样，唯一的就是开发组件要有统一的设计和思考，不然长时间下来很难把控。
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇一]
禅思院
02-28 411
我们在使用第三方各种UI库，比如element、ant design等提供的ui组件，发现他们打包万变不离其宗，看似复杂其实也不复杂，只要明白其中的原理，抽丝剥茧，就很简单啦！本文接上文的工程项目，进行接下来的工作。当然一个人还是很难和大厂推出的产品进行对比，但是我们不是为了对比，我们是为了提高自己，让能力更近一步。很多博客上博主也有很多讲解rollup的网站不是对api的详细抄袭就是对api文档的解释，基本上没有实战的教程；纯属个人见解，感觉写的很模糊，没有实战性！
没有那么难！10 分钟带你构建monorepo架构，前端通用自动化 CI/CD 方案
最新发布
LuckyWinty的博客
08-13 64
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群今天我们主要讨论3方面内容：如何搭建比较高效好用的monorepo工程前端如何基于搭建的monorepo工程实现自定义cli工具普通前端项目以及monorepo工程项目自动化cicd核心问题以及解决方案基于 pnpm-workspace + Turborepo + lerna 搭建 monorepo 的 cli 工程首先利用 pnpm 初始...
Monorepo 模板 —— 使用 PNPM 从零搭建 Monorepo，测试 web components 并发布
天下布武
06-12 1392
通过 PNPM 创建一个 monorepo（多个项目在一个代码仓库）项目，形成一个通用的仓库模板。这个仓库既可以用于公司存放和管理所有的项目，也可以用于将个人班余的所有积累整合其中。
Pnpm + Turbo 搭建 Web Component Monorepo 组件库
前端攻城狮
04-06 1822
技术选型 使用 Pnpm + Turbo 搭建 Web Component Monorepo项 组件库，提高开发构建速度
monorepo
weixin_30471065的博客
07-16 166
1.什么是monorepo? Monorepo 它是一种管理 organisation 代码的方式，在这种方式下会摒弃原先一个 module 一个 repo 的方式，取而代之的是把所有的 modules 都放在一个 repo 内来管理。 目前诸如 Babel, React, Angular, Ember, Meteor, Jest 等等都采用了 Monorepo 这种方式来进行源码的管...
Monorepo
liangx的博客
03-20 866
Monorepo 最早的出处是软件开发策略的一个分支，”mono” 表示单一 “repo” 是”repository”的缩写，意为多个项目共用一个代码库来管理依赖关系，同一套配置文件，统一构建部署流程等等。Monorepo是集中式管理的前端代码管理方式，将所有的项目在集中一个代码仓库进行管理，严格的统一个收归，有利于统一的升级和管理方式，作为新型的管理方式，monorepo有效降低了运行以及协作的成本，但一个代码仓库的管理模式带来了项目体积上的上升，获取时间延长，同时安全性也有所下降。
pnpm和vite搭建项目
04-03
要使用pnpm和vite搭建项目，需要按照以下步骤进行操作： 1. 安装pnpm 使用以下命令安装pnpm： ``` npm install -g pnpm ``` 2. 创建项目 使用以下命令创建项目： ``` pnpm init vite-app my-project ``` 这将创建一个名为my-project的新项目。 3. 安装依赖 进入项目目录并使用以下命令安装依赖： ``` cd my-project pnpm install ``` 4. 运行项目 使用以下命令在开发模式下运行项目： ``` pnpm run dev ``` 5. 构建项目 使用以下命令构建项目： ``` pnpm run build ``` 这将生成一个dist目录，并将打包后的文件放置在其中。 至此，使用pnpm和vite搭建项目的步骤已经完成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

禅思院

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值