请选择 进入手机版 | 继续访问电脑版

登录  | 立即注册

游客您好!登录后享受更多精彩

查看: 7095|回复: 7

lerna管理前端packages的最佳实践

[复制链接]

20

主题

35

帖子

385

积分

中级会员

Rank: 3Rank: 3

积分
385
发表于 2020-1-24 21:51:25 | 显示全部楼层 |阅读模式
背景

对于维护过多个package的同学来说,都会遇到一个选择:这些package是放在一个仓库里维护还是放在多个仓库里单独维护,数量较少的时候,多个仓库维护不会有太大问题,但是当package数量逐渐增多时,一些问题逐渐暴露出来:

  • package之间相互依赖,开发人员需要在本地手动执行npm link,维护版本号的更替;
  • issue难以统一追踪,管理,因为其分散在独立的repo里;
  • 每一个package都包含独立的node_modules,而且大部分都包含babel,webpack等开发时依赖,安装耗时冗余并且占用过多空间。
什么是lerna

lerna到底是什么呢?lerna官网上是这样描述的
用于管理具有多个包的JavaScript项目的工具。
这个介绍可以说很清晰了,引入lerna后,上面提到的问题不仅迎刃而解,更为开发人员提供了一种管理多packages javascript项目的方式。
一、自动解决packages之间的依赖关系。
二、通过git 检测文件改动,自动发布。
三、根据git 提交记录,自动生成CHANGELOG
常用命令

全局安装lerna

lerna 我们需要全局安装lerna工具。
  1. $ npm i -g lerna# 或$ yarn global add lerna
复制代码
为所有项目安装依赖,类似于npm/yarn i
  1. $ lerna bootstrap
复制代码
提交对项目的更新

运行该命令会执行如下的步骤

  • 运行lerna updated来决定哪一个包需要被publish
  • 如果有必要,将会更新lerna.json中的version
  • 将所有更新过的的包中的package.json的version字段更新
  • 将所有更新过的包中的依赖更新
  • 为新版本创建一个git commit或tag
  • 将包publish到npm上

  1. $ lerna publish # 用于发布更新$ lerna publish --skip-git # 不会创建git commit或tag$ lerna publish --skip-npm # 不会把包publish到npm上
复制代码
使用lerna 初始化项目
  1. $ lerna init # 固定模式(Fixed mode)默认为固定模式,packages下的所有包共用一个版本号(version)$ lerna init --independent # 独立模式(Independent mode),每一个包有一个独立的版本号
复制代码
为packages文件夹下的package安装依赖
  1. $ lerna add [@version] [--dev] # 命令签名# 例如$ lerna add module-1 --scope=module-2 # 将 module-1 安装到 module-2$ lerna add module-1 --scope=module-2 --dev # 将 module-1 安装到 module-2 的 devDependencies 下$ lerna add module-1 # 将 module-1 安装到除 module-1 以外的所有模块$ lerna add babel-core # 将 babel-core 安装到所有模块
复制代码
卸载依赖
  1. $ lerna exec --  [..args] # 在所有包中运行该命令# 例如$ lerna exec --scope=npm-list  yarn remove listr # 将 npm-list 包下的 listr 卸载$ lerna exec -- yarn remove listr # 将所有包下的 listr 卸载
复制代码
检查对包是否发生过变更(前提是git代码已经提交)
  1. $ lerna updated# 或$ lerna diff
复制代码

  • 显示packages下的各个package的name
  1. $ lerna ls
复制代码


  • 清理node_modules
  1. $ lerna clean
复制代码
lerna run

运行npm script,可以指定具体的package。
  1. $ lerna run <script> -- [..args] # 在所有包下运行指定# 例如$ lerna run test # 运行所有包的 test 命令$ lerna run build # 运行所有包的 build 命令$ lerna run --parallel watch # 观看所有包并在更改时发报,流式处理前缀输出$ lerna run --scope my-component test # 运行 my-component 模块下的 test
复制代码
lerna.json解析
  1. {  "version": "1.1.3",  "npmClient": "npm",  "command": {    "publish": {      "ignoreChanges": [        "ignored-file",        "*.md"      ]    },    "bootstrap": {      "ignore": "component-*",      "npmClientArgs": ["--no-package-lock"]          }  },  "packages": ["packages/*"]}
复制代码
version:当前库的版本
npmClient: 允许指定命令使用的client, 默认是 npm, 可以设置成 yarn
command.publish.ignoreChanges:可以指定那些目录或者文件的变更不会被publish
command.bootstrap.ignore:指定不受 bootstrap 命令影响的包
command.bootstrap.npmClientArgs:指定默认传给 lerna bootstrap 命令的参数
command.bootstrap.scope:指定那些包会受 lerna bootstrap 命令影响
packages:指定包所在的目录
环境配置


  • Git 在一个lerna工程里,是通过git来进行代码管理的。所以你首先要确保本地有正确的git环境。 如果需要多人协作开发,请先创建正确的git中心仓库的链接。 因此需要你了解基本的git操作,在此不再赘述。
  • npm仓库 无论你管理的package是要发布到官网还是公司的私有服务器上,都需要正确的仓库地址和用户名。 你可运行下方的命令来检查,本地的npm registry地址是否正确。
  1. $ npm config ls
复制代码
lerna 我们需要全局安装lerna工具
  1. $ npm i -g lerna# 或$ yarn global add lerna
复制代码
初始化一个lerna工程

在这个例子中,我将在我本地d:/jobs 根目录下初始化一个lerna工程。1、在d:/jobs下创建一个空的文件夹,命名为lerna-demo
  1. $ mkdir lerna-demo
复制代码
初始化 通过cmd进入相关目录,进行初始化
  1. $ cd d:/jobs/lerna-demo$ lerna init
复制代码
执行成功后,目录下将会生成这样的目录结构。
  1. - packages(目录)- lerna.json(配置文件)- package.json(工程描述文件)
复制代码
3、添加一个测试package
默认情况下,package是放在packages目录下的。
  1. # 进入packages目录cd d:/jobs/lerna-demo/packages# 创建一个packge目录mkdir module-1# 进入module-1 package目录cd module-1# 初始化一个packagenpm init -y
复制代码
执行完毕,工程下的目录结构如下:
  1. --packages        --module-1                package.json--lerna.json--package.json
复制代码
4、安装各packages依赖 这一步操作,官网上是这样描述的
在当前的Lerna仓库中引导包。安装所有依赖项并链接任何交叉依赖项。
  1. $ cd d:/lerna-demo$ lerna bootstrap
复制代码
在现在的测试package中,module-1是没有任何依赖的,因此为了更加接近真实情况。你可已在module-1的package.json文件中添加一些第三方库的依赖。 这样的话,当你执行完该条命令后,你会发现module-1的依赖已经安装上了。
5、发布 在发布的时候,就需要git工具的配合了。 所以在发布之前,请确认此时该lerna工程是否已经连接到git的远程仓库。你可以执行下面的命令进行查看
  1. git remote -v// print logorigin  git@github.com:meitianyitan/docm.git (fetch)origin  git@github.com:meitianyitan/docm.git (push)
复制代码
本篇文章的代码托管在Github上。因此会显示此远程链接信息。 如果你还没有与远程仓库链接,请首先在github创建一个空的仓库,然后根据相关提示信息,进行链接。
  1. $ lerna publish
复制代码
执行这条命令,你就可以根据cmd中的提示,一步步的发布packges了。
实际上在执行该条命令的时候,lerna会做很多的工作。
  1. -  Run the equivalent of  `lerna updated`  to determine which packages need to be published.-  If necessary, increment the  `version`  key in  `lerna.json`.-  Update the  `package.json`  of all updated packages to their new versions.-  Update all dependencies of the updated packages with the new versions, specified with a  [caret (^)](https://docs.npmjs.com/files/package.json#dependencies).-  Create a new git commit and tag for the new version.-  Publish updated packages to npm.
复制代码
到这里为止,就是一个最简单的lerna的工作流了。但是lerna还有更多的功能等待你去发掘。
lerna有两种工作模式,Independent mode和Fixed/Locked mode,在这里介绍可能会对初学者造成困扰,但因为实在太重要了,还是有必要提一下的。
lerna的默认模式是Fixed/Locked mode,在这种模式下,实际上lerna是把工程当作一个整体来对待。每次发布packges,都是全量发布,无论是否修改。但是在Independent mode下,lerna会配合Git,检查文件变动,只发布有改动的packge。
lerna最佳实践

为了能够使lerna发挥最大的作用,根据这段时间使用lerna 的经验,总结出一个最佳实践。下面是一些特性。
  1. 采用Independent模式根据Git提交信息,自动生成changelogeslint规则检查prettier自动格式化代码提交代码,代码检查hook遵循semver版本规范大家应该也可以看出来,在开发这种工程的过程的,最为重要的一点就是规范。因为应用场景各种各样,你必须保证发布的packge是规范的,代码是规范的,一切都是有迹可循的。这点我认为是非常重要的。
复制代码
bug

lerna  3.16.4中的一个bug

Enter a custom version? 输入项如果直接enter的话会报错
欢迎加我wx    wangchen20180818 交流,学习
                                                                                                                                       
                                                    
  • 点赞                        
  • 收藏                        
  • 分享                                                                                                                        
  •                                                         
                                      
    • 文章举报                           
                                                
                                                                        
                                            
                                                        十三_先生_                                                                发布了77 篇原创文章 · 获赞 7 · 访问量 2万+                                                                                            私信                                                            关注
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x




上一篇:文件上传
下一篇:模拟人为自动刷视频产品方案
回复

使用道具 举报

0

主题

28

帖子

598

积分

高级会员

Rank: 4

积分
598
发表于 2020-1-25 04:26:27 | 显示全部楼层
其实我一直觉得楼主的品味不错!呵呵![www.12360.co]
回复

使用道具 举报

0

主题

22

帖子

472

积分

中级会员

Rank: 3Rank: 3

积分
472
发表于 2020-1-30 01:41:46 | 显示全部楼层
这东西我收了!谢谢楼主![www.12360.co]
回复

使用道具 举报

0

主题

34

帖子

724

积分

高级会员

Rank: 4

积分
724
发表于 2020-2-4 09:12:41 | 显示全部楼层
楼主,大恩不言谢了![www.12360.co]
回复

使用道具 举报

0

主题

28

帖子

598

积分

高级会员

Rank: 4

积分
598
发表于 2020-2-20 17:52:34 | 显示全部楼层
既然你诚信诚意的推荐了,那我就勉为其难的看看吧![www.12360.co]
回复

使用道具 举报

发表于 2020-2-22 10:54:47 | 显示全部楼层
这个帖子不回对不起自己![www.12360.co]
回复

使用道具 举报

0

主题

27

帖子

577

积分

高级会员

Rank: 4

积分
577
发表于 2020-3-3 23:55:16 | 显示全部楼层
楼主发贴辛苦了,谢谢楼主分享![www.12360.co]
回复

使用道具 举报

0

主题

19

帖子

409

积分

中级会员

Rank: 3Rank: 3

积分
409
发表于 2020-3-7 12:05:22 | 显示全部楼层
感谢楼主的无私分享![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

动物之森

GMT+8, 2020-3-30 13:44 , Processed in 0.097032 second(s), 42 queries .

www.12360.co 集合吧!动物之森

Copyright © 2019-2020.

快速回复 返回顶部 返回列表