前端开发入门到精通的在线学习网站

网站首页 > 资源文章 正文

前端多包管理工具lerna使用详解(前端包管理器)

qiguaw 2024-10-19 07:57:22 资源文章 21 ℃ 0 评论

背景

最近有这么一个项目,这个项目需要依赖多个npm包,这些npm包有部分依赖是相同的(或者包与包之间有相互联系),如下:

如图1所示,这里有两个npm包:npm1和npm2,它们有公共的依赖base2。这种情况下我们该如何管理本地代码呢?

如果npm1和npm2本地代码分别存入一个单独的仓库,那么base2就需要copy一份,并且更新时两侧都要保持同步,另外如果还有更多的包,更多的公共依赖,那代码的维护就更加麻烦了!

为了解决这个问题,我们引入一个包管理工具——lerna。

使用介绍

1、全局安装lerna

npm install lerna -g

安装完成后,我们看一下控制台有没有这个命令:

图2显示版本为3.16.4,说明我们已经安装成功了。

2、初始化我们的项目仓库,先创建一个lerna-repo目录,然后进入此目录运行下面的命令

lerna init //先采用默认模式,生成图3目录结构

很明显lerna.json是lerna的配置文件(你会发现很多工具都有本地的配置文件以便用户可以根据自己的业务自定义能力),打开这个json文件,如下图:

我们先关注这个packages属性,它是一个数组,每个元素代表可以发布的npm包的目录,比如图4中代表packages目录(初始化生成的)下所有的文件夹都是可以发版的npm包,另外也可以自定义npm包的目录,如下:

图5中我们自定义了一个目录——packages/plugins下所有的文件夹都是可以发版的npm包。

我们再看一眼图3,一般lerna-repo目录下可以存放各种依赖lib和入口entry,通过构建工具script tool将这些代码打包进packages目录中

3、生成一个npm包

lerna create <包名> [目录]

图6中,我们在packages/plugins目录下生成一个名为npm1的包,生成后的目录结构如下:

4、为包添加依赖

lerna add 包名 [--scope=特定的某个包] [--dev]

功能类似于npm install 包名,scope指定为某个包添加依赖,如果没有scope选项,就会为packages下所有的包添加这个依赖;dev选项代表依赖添加进devDependencies中。

5、查看整个工程目录下有哪些包

lerna list [-l]

个人比较喜欢加一个-l先选项,信息会更加全面一些。

6、为每个包安装依赖

lerna bootstrap [--scope=特定的某个包]

功能和npm install差不多,如果不加scope,lerna会把工程下的所有包的依赖都安装好!

7、删除包下面的node_modules

上面的命令安装依赖会在每个包目录下生成node_modules,下面的命令就是将node_modules删除

lerna clean

8、导入外部的包(这个命令比较有意思)

lerna import 外部包的位置 --dest=工程下的位置

图9中,koa是一个开源的包,我们用git下载到本地,然后用上面的命令导入到packages/plugins目录下,不仅代码会被导入,连git的操作历史也会被一起导入,所以它的应用场景也就非常的明确,就是为了将已经存在的npm包代码库迁移到 lerna 仓库中。

9、运行包的script命令

lerna run 命令 [--scope=特定的某个包]

和npm run [命令] 没什么区别,如果没有scope选项,lerna会运行每个包的script命令,如下:

图10中运行了两个包下的test命令。

10、查看diff

lerna diff

和git diff 基本没区别,会显示工程下所有的修改

11、查看可以发布的包

lerna changed

图11中显示有两个包可以发布,当你发布完成后再运行这个命令,红色区域就会显示No changed packages found。

12、发布

lerna publish [--dist-tag=tag名]

如图12所示,控制台会让用户选择要发版的版本号(最后一个可以自定义)

dist-tag选项可以发版一个其他分支的包,在测试时比较有用!

测试时可以发布一个beta版(--dist-tag=beta),通过手动@版本号安装(npm install 默认安装latest)!

13、模式

lerna init初始化默认使用的是fixed模式,回看图4中有个version选项,lerna在它的配置文件中记录了当前工程下所有包中最大的版本号,每个包发版时都是在这个版本号的基础上增加,发布完成,这个version也会更新到最大版本号!

比如 npm1 版本号是 0.0.1,npm2 版本号是 0.0.3,lerna配置文件的version是0.0.3,你现在修改npm1,准备发布新包,你认为新包的版本号可能是0.0.2?错!此模式下,lerna会以配置文件的version向上递增:

  • 如果增加patch,npm1发包后版本号是0.0.4,npm2的版本号不变;
  • 如果增加major或者minor,packages下的所有包都会统一增加,npm1和npm2都会统一变成0.1.0或者1.0.0;

babel和vue就是采用这种模式的。

另一种模式是independent

lerna init --independent

这种模式下lerna就不会帮忙记录版本号了,各包按照自己的规则递增。

总结

此篇文章主要介绍了lerna如何使用,有时看文档比较晦涩不容易懂,希望这篇文章能让读者更清楚的认识lerna!篇幅有限,还有很多的命令和配置没有讲到,在使用时如果有疑问可以在命令后面加一个--help选项,就会有使用介绍!

喜欢我的文章就关注我吧,后续会更多干货输出,让我们一起学习,共同成长!

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表