lerna管理前端模块实践

最近在工作中使用了 lerna 进行前端包的管理，效率提升了很多。所以打算总结一下最近几个月使用 lerna 的一些心得。有那些不足的地方，请包涵。

该篇文章主要包括在使用 lerna 的一些注意事项，和使用过程中与其他工具的整合，最终形成的一个最佳实践。

package 的指的是一个可以通过 npm 包管理工具发布的一种目录结构，翻译过来感觉不太适合，所以就用package 来说明吧。

前端开发 package 面临的问题

在最初开开发 package 的时候，还属于一种刀耕火种的阶段。没有什么自动化的工具。发布 package 的时候，都是手动修改版本号。如果 packages 数量不多还可以接受。但是当数量逐渐增多的时候，且这些 packages 之间还有依赖关系的时候，对开发人员来说，就很痛苦了。工作不仅繁琐，而且需要用掉不少时间。

举个例子，如果你要维护两个package。分别为 module-1, module-2。下面是这两个 package 的依赖关系。

// module-1 package.json

{

    "name": "module-1",

    "version": "1.0.0",

    "dependencies": {

        "module-2": "^1.0.0"

    }

}

//module-2 package.json

{

"name": "module-2",

"version": "1.0.0",

}

在这样的环境下，module-1 是依赖 module-2 的。如果 module-2 有修改，需要发布。那么你的工作有这些。

修改 module-2 版本号，发布。
修改 module-1 的依赖关系，修改 module-1 的版本号，发布。

这还仅仅只有两个 package，如果依赖关系更复杂，大家可以想想发布的工作量有多大。

什么是lerna?为什么要使用lerna?

lerna 到底是什么呢？lerna 官网上是这样描述的。

A tool for managing JavaScript projects with multiple packages.

这个介绍可以说很清晰了，引入lerna后，上面提到的问题不仅迎刃而解，更为开发人员提供了一种管理多 packages javascript 项目的方式。

自动解决packages之间的依赖关系
通过 git 检测文件改动，自动发布
根据 git 提交记录，自动生成 CHANGELOG

使用lerna的基本工作流

环境配置

Git 在一个 lerna 工程里，是通过 git 来进行代码管理的。所以你首先要确保本地有正确的 git 环境。如果需要多人协作开发，请先创建正确的 git 中心仓库的链接。因此需要你了解基本的 git 操作，在此不再赘述。
npm 仓库无论你管理的 package 是要发布到官网还是公司的私有服务器上，都需要正确的仓库地址和用户名。你可运行下方的命令来检查，本地的 npm registry 地址是否正确。

npm config ls

lerna 你需要全局安装 lerna 工具。

npm install lerna -g

初始化一个lerna工程

在这个例子中，我将在我本地根目录下初始化一个lerna工程。

创建一个空的文件夹，命名为 lerna-demo

mkdir lerna-demo

初始化

cd lerna-demo

lerna init

执行成功后，目录下将会生成这样的目录结构。

- packages(目录)

 - lerna.json(配置文件)

 - package.json(工程描述文件)

添加一个测试package

默认情况下，package是放在 packages 目录下的。

// 进入packages目录

cd lerna-demo/packages

// 创建一个packge目录

mkdir module-1

// 进入module-1 package目录

cd module-1

// 初始化一个package

npm init -y

执行完毕，工程下的目录结构如下

--packages

  --module-1

    package.json

--lerna.json

--package.json

安装各 packages 依赖这一步操作，官网上是这样描述的。

Bootstrap the packages in the current Lerna repo. Installs all of their dependencies and links any cross-dependencies.

cd lerna-demo

lerna bootstrap

在现在的测试 package 中，module-1 是没有任何依赖的，因此为了更加接近真实情况。你可已在 module-1 的package.json 文件中添加一些第三方库的依赖。这样的话，当你执行完该条命令后，你会发现 module-1 的依赖已经安装上了。

发布在发布的时候，就需要 git 工具的配合了。所以在发布之前，请确认此时该 lerna 工程是否已经连接到git 的远程仓库。你可以执行下面的命令进行查看。

git remote -v

// print log

origin  git@github.com/iNuanfeng/lerna-demo.git (fetch)

origin  git@github.com/iNuanfeng/lerna-demo.git (push)

本篇文章的代码托管在 Github 上。因此会显示此远程链接信息。如果你还没有与远程仓库链接，请首先在 github 创建一个空的仓库，然后根据相关提示信息，进行链接。

lerna publish

执行这条命令，你就可以根据cmd中的提示，一步步的发布packges了。实际上在执行该条命令的时候，lerna会做很多的工作。

-  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 的经验，总结出一个最佳实践。下面是一些特性。

采用 Independent 模式
根据 Git 提交信息，自动生成 changelog
eslint 规则检查
prettier 自动格式化代码
提交代码，代码检查 hook
遵循 semver 版本规范

大家应该也可以看出来，在开发这种工程的过程的，最为重要的一点就是规范。因为应用场景各种各样，你必须保证发布的 packge 是规范的，代码是规范的，一切都是有迹可循的。这点我认为是非常重要的。github代码