长春网站建设价格,wordpress 快讯模板,自己做网站怎么加定位,公司牌子制作技术选型
使用 Pnpm Turbo 搭建 Web Component Monorepo项目 stencil-component-ui 组件库
pnpm 作为包管理器Turborepo 作为构建系统Vitepress 管理文档
pnpm 技术
什么是 pnpm? 它有哪些优势#xff1f;
pnpm 跟 npm、yarn一样#xff0c;都是用于管理Node包依赖的管…技术选型
使用 Pnpm Turbo 搭建 Web Component Monorepo项目 stencil-component-ui 组件库
pnpm 作为包管理器Turborepo 作为构建系统Vitepress 管理文档
pnpm 技术
什么是 pnpm? 它有哪些优势
pnpm 跟 npm、yarn一样都是用于管理Node包依赖的管理器它是号称新一代的最先进包管理工具。按照官网说法它相比其他包管理工具可以大大节约磁盘空间并提升安装速度创建非扁平化的 node_modules 文件夹目录结构很清晰具体介绍可以参考 pnpm 官网
pnpm 提出了 workspace 的概念内置了对 monorepo 的支持那么为什么用 pnpm 取代之前的 lerna 呢?
这里总结了以下几点原因
lerna 已经不再维护后续有任何问题社区无法及时响应pnpm装包效率更高并且可以节约更多磁盘空间pnpm本身就预置了对monorepo的支持不需要再额外第三方包的支持
pnpm 搭建 menorepo 工程
在工程根目录下新建 packages 目录并且在 packages 目录下创建 components 和 icons 两个子项目这里使用 stencil 脚手架进入 packages 目录根据 Stencil 官网 创建项目
pnpm create stencil有三个选项直接回车选择第一个 components 是创建组件库项目的输入项目名称即可创建项目
分别使用 stencil 创建了 components 和 icons 项目components 是来开发组件库源码的icons 是用来开发编译 svg 图片和组件的目录如下 在工程根目录建一个 pnpm-workspace.yaml用于启用 workspace
packages:- packages/*- docs以上指定工作空间内的包依赖关系packages 用于管理源码docs 编写文档然后执行 pnpm install 安装依赖
由于工程根目录 package.json 不需要发包需要配置 private: true
在项目中安装包
Pnpm 启用了 workspace用 Pnpm 安装依赖必须指定安装的位置。-w 是 --workspace-root 的别名即安装到工程根目录作为所有子模块的公共依赖。也可以用 -r 递归给每个子模块安装或者用 --filter package_name 给指定子模块安装。-D 是 --save-dev 的别名即安装依赖到 devDependencies 节点下不指定参数默认安装到 dependencies 节点。
给每个项目起个包名修改components 和 icons 项目 package.json 中的 name 字段为 swc-ui/components 和 swc-ui/iconsdocs 使用 vitepress 搭建包名直接用 docs 这一步比较关键安装包、构建、发包都需要用到这个包名。swc-ui 是提前创建好的 scope如果没有的话需要先创建 图标库、组件库包安装到 docs 使用图标库包安装到组件库项目中使用使用 --filter 指定安装包的位置
pnpm add swc-ui/components swc-ui/icons --filterdocspnpm add swc-ui/icons --filterswc-ui/componentscomponents 安装 swc-ui/icons 后package.json新增了 swc-ui/icons: workspace:^
dependencies: {swc-ui/icons: workspace:^}
通过 Pnpm 提供的 Workspace Protocol可以很方便地实现子模块互相引用。在开发的时候也推荐使用 workspace:^这样可以确保依赖的是最新版本代码。当我们用 pnpm publish 发包的时候Pnpm 会将 workspace:^ 替换为实际的版本。
只允许 pnpm
当在项目中使用 pnpm 时如果不希望开发者使用 yarn 或者 npm 安装依赖可以将下面的这个 preinstall 脚本添加到工程根目录下的 package.json 中
preinstall: npx only-allow pnpm因为在在 Pnpm workspace 模式下 npm install 或者 yarn install 安装依赖无法兼容整个工程很可能跑不起来所以用 only-allow 库去限制包管理器当用了其他包管理器会直接抛异常退出进程。
Turborepo
在项目开发和打包发布必须先启动 icons 和 components 项目编译构建才能运行 docs 文档如果使用 pnpm 构建可能需要使用 -r 或者 并行执行如
{scripts: {build: pnpm -r --parallel --filter./packages/* run build,test: pnpm -r --parallel --filter./packages/* run test}
}Pnpm 给我们提供的 -r 参数递归执行 NPM scripts但是它不能按照先后顺序执行串行的任务并且 -r 过于简单粗暴有些模块明明没有修改代码任务还是全量执行影响 CI 构建效率。 专业的事交给专业的工具去解决而 Turborepo 就非常擅长实现任务编排
什么是Turborepo
Turborepo 是一个高性能的 JavaScript 和 TypeScript 项目构建系统采用Go语言实现所以在语言层面上就具有一定的性能优势可以大大提高monorepo项目的构建速度。
在开发层面 Turborepo抽象出所有繁琐的配置、脚本和工具减少项目配置的复杂性可以让我们专注于业务的开发并且支持使用 Yarn、Npm、Pnpm
TurboRepo的优势
1、多任务并行处理
Turbo支持多个任务的并行运行我们在对多个子包编译打包的过程中turbo会同时进行多个任务的处理
对于项目中 A 依赖于 BB 依赖于 C构建串行顺序为 C、B、A。Turbo它能够有效地安排任务类似于瀑布可以同时异步执行多个任务而 lerna 一次只能执行一项任务 所以Turbo的性能不言而喻。
2、更快的增量构建
如果我们的项目过大构建多个子包会造成时间和性能的浪费turborepo中的缓存机制 可以帮助我们记住构建内容 并且跳过已经计算过的内容优化打包效率。
3、任务管道
用配置文件定义任务之间的关系然后让Turborepo优化构建内容和时间。
4、远程云缓存
Turbo通过其远程缓存功能团队成员、CI/CD 共享远程构建缓存以实现更快的构建。
安装到项目
1、在项目根目录下安装turbo依赖
pnpm i turbo --save-dev -w2、在根目录下添加 turbo.json 配置文件向 pipeline 字段中配置 npm scripts 中的命令比如 dev, build 命令
{$schema: https://turbo.build/schema.json,pipeline: {build: {dependsOn: [^build],outputs: [.next/**, !.next/cache/**]},dev: {cache: false,persistent: true}}
}3、在根目录 package 配置 scripts
scripts: {dev: turbo run dev,build: turbo run build
}以上 Turborepo 项目就简单配置完成了Turbo 和 Pnpm Workspace 很好的结合起来管理 monorepo 项目
Turbo 开发环境
当执行 npm run dev 命令Turbo 会分析 Package 包的依赖关系运行 swc-ui/icons、swc-ui/components docs 开发环境通过 turbo.json 配置一行命令就启动了开发环境不需要手动去执行 icon、components、docs的命令 Turbo 构建打包
Turbo 构建提供了缓存当执行 npm run build 全部构建需要花费1分钟06秒 第二次构建修改了一个包花费了 30 秒第三次没有修改源码重新构建1秒内构建完明显可以感受到 Turbo 缓存构建的优势。 如对新技术开发组件库感兴趣也欢迎加入stencil-component-ui给个 star 鼓励一下
