摘要:最近发现公司一个项目的目录组织挺奇怪的,所有的子项目都放在了目录里,还有这种骚操作特意查了下资料,发现是一种比较流行的项目管理模式。
最近发现公司一个项目的目录组织挺奇怪的,所有的子项目都放在了packages目录里,还有这种骚操作?特意查了下资料,发现是一种比较流行的monorepo项目管理模式。近几年比较火的React,Vue,Babel都是用的这种模式:
我们平常一般采用的都是multiple repositories的项目管理模式:把一个大项目拆分成若干个小项目,每个小项目都独立的放在gitlab上。这种模式其实也没啥不好,但是某些情况下,子项目A依赖子项目B,如果子项目B经常改动,那么每次B改动了,都要修改A,这时就非常麻烦。在开发一个前端框架或者UI库时,就经常会遇到上述情况,这时我们就可以考虑下monorepo。
monorepo说到底也只是一个理念,那么怎么才能实现这种代码组织呢?
lerna
yarn中的Workspace
本文主要介绍下lerna的使用
源码参考
lerna全局安装lerna
npm i lerna -g
lerna是基于git的,在github上新建一个项目learn-lerna
git clone git@github.com:deepred5/learn-lerna.git cd learn-lerna
初始化项目:
lerna init
lerna会自动创建一个packages目录夹,我们以后的项目都新建在这里面。同时还会在根目录新建一个lerna.json配置文件
{ "packages": [ "packages/*" ], "version": "0.0.0" // 共用的版本,由lerna管理 }创建package
我们创建两个package:
cd packages mkdir prpr-lerna-core cd prpr-lerna-core npm init -y
cd packages mkdir prpr-lerna-popular cd prpr-lerna-popular npm init -y
注意:这两个package我们最后都是要发布到npm上的,所以名字请取特殊些,不能被人用过
添加依赖prpr-lerna-popular依赖prpr-lerna-core,这时有两种方法添加依赖:
第一种方法是修改prpr-lerna-popular/package.json,添加
{ "dependencies": { "prpr-lerna-core": "^1.0.0" } }
然后运行lerna bootstrap
第二种方法是直接使用命令add
lerna add prpr-lerna-core --scope=prpr-lerna-popular
运行之后,我们发现prpr-lerna-popular生成了node_modules,而node_modules里生成了指向prpr-lerna-core的软链,类似npm link的效果:
新建prpr-lerna-core/index.js
const API = "https://yande.re/post/popular_recent.json"; module.exports = { API }
prpr-lerna-popular除了依赖prpr-lerna-core,还可以依赖其他开源的库,比如我们使用axios
lerna add axios --scope=prpr-lerna-popular
新建prpr-lerna-popular/index.js
const { API } = require("prpr-lerna-core"); const axios = require("axios"); const getPopularImg = () => axios.get(API) module.exports = getPopularImg; // 测试代码,发布时删除 getPopularImg().then((res) => console.log(res.data.length));
测试一下:
node packages/prpr-lerna-popular/index.js
正常情况下可以输出结果
首先把所有的代码提交
cd learn-lerna git add . git commit -m "test publish"
注册一个npmjs账户
npm login
登入你的账户,如果本地npm是淘宝镜像,一定要换回https://registry.npmjs.org/地址!!!
lerna publish
运行publish,选择发布的版本号
lerna可以帮我们管理版本号,非常方便!
常用命令lerna init #初始化 lerna bootstrap #下载依赖包或者生成本地软连接 lerna add axios #所有包都添加axios lerna add prpr-lerna-core --scope=prpr-lerna-popular #给包prpr-lerna-popularx添加prpr-lerna-core依赖 lerna list lerna clean其他事项
lerna默认使用的是集中版本,所有的package共用一个version。如果希望不同的package拥有自己的版本,可以使用Independent模式
发布package的名字如果是以@开头的,例如@deepred/core,npm默认以为是私人发布,需要使用npm publish --access public发布。但是lerna publish不支持该参数,解决方法参考: issues
参考浅谈monorepo
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105444.html
摘要:如何像那样进行多包管理呢项目的里面存放了旗下的所有包,比如。如果你不想这么麻烦,那么有一个办法就是,不用,也就是你的包名不加前缀,这样你的包就默认是公共的包了,完全可以不用先去提交一次公共版本,才能使用来管理你的包,简单多了。 温馨提示:请直接看最后面的正确操作,如果不懂,再回顾全文。 如何像 babel 那样进行多包管理呢? babel 项目的 packages 里面存放了 babe...
摘要:目前最常见的解决方案是和的特性。具体的使用方法移步官网而使用作为包管理器的同学,可以在中以字段声明,就会以的方式管理。这样的话,无论你的包管理器是还是,都能发挥的优势要是包管理是,就会把依赖安装交给处理。 最近我接手了一个项目,代码量比较大、有点复杂。仓库 clone 下来代码有 50+ MB,npm install 安装完体积飚到了近 2GB …… 熟悉了一下,这个项目比较复杂,采用...
摘要:从到完美,写一个库库前端组件库之前讲了很多关于项目工程化前端架构前端构建等方面的技术,这次说说怎么写一个完美的第三方库。使用导出模块,就可以在使用这个库的项目中构建时使用功能。 从 1 到完美,写一个 js 库、node 库、前端组件库 之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术,这次说说怎么写一个完美的第三方库。 1. 选择合适的规范来写代码 js 模块化的发展大致有...
摘要:从到完美,写一个库库前端组件库之前讲了很多关于项目工程化前端架构前端构建等方面的技术,这次说说怎么写一个完美的第三方库。使用导出模块,就可以在使用这个库的项目中构建时使用功能。 从 1 到完美,写一个 js 库、node 库、前端组件库 之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术,这次说说怎么写一个完美的第三方库。 1. 选择合适的规范来写代码 js 模块化的发展大致有...
我们先说下 Yarn workspace 首先Yarn workspace 是 Yarn 提供的 monorepo 下,管理依赖的机制。这就说主要对代码仓库下,多个 package 的依赖,进行管理:将共同的依赖,做 hosting(提升)。前述这样就可以有效的防止 package 中的包重复安装。 workspace 机制,会在根目录下,统一安装依赖到 node_module,并生成...
阅读 2398·2021-11-11 11:01
阅读 3235·2021-10-11 10:57
阅读 2574·2021-09-30 09:46
阅读 3437·2021-07-26 23:38
阅读 1514·2019-08-29 12:22
阅读 630·2019-08-29 11:28
阅读 2330·2019-08-26 14:04
阅读 3019·2019-08-23 18:34