lerna + dumi + eslint多包管理实践

徐小夕 等级 682 0 0

背景

在开发大型项目时, 我们通常会遇到同一工程依赖不同组件包, 同时不同的组件包之间还会相互依赖的问题, 那么如何管理组织这些依赖包就是一个迫在眉睫的问题.

lerna + dumi + eslint多包管理实践

我们目前已有的方案有: Multirepo(多个依赖包独立进行git管理) 和 Monorepo(所有依赖库完全放入一个项目工程).

Multirepo的缺点在于每个库变更之后,需要发布到线上,然后在项目中重新安装, 打包, 发布, 最后才能更新,这样如果依赖关系越复杂就越难以维护。Monorepo最大的缺点就是不便于代码的复用和共享。

为了解决上述的问题, lerna 这款工具诞生了, 它可以方便的管理具有多个包的 JavaScript 项目。同时对于组件包的开发者和维护者, 为了让团队其他成员更好的理解和使用我们开发的组件, 搭建组件文档和 demo 就显得格外重要.

lerna + dumi + eslint多包管理实践

我们对以上提到的几点问题做一个总结:

  • 大型项目中如何管理组织依赖包及其版本问题
  • 如何高效低成本的搭建简单易用的组件文档
  • 如何配置eslint代码规范和代码提交规范

接下来我将针对以上问题一一来给出解答. 如果大家想看实际的案例, 可以参考:

大型项目中如何管理组织依赖包及其版本问题

这个问题主要用我上面的提到的 lerna 工具来解决. 目前我们比较熟悉的 babel, create-react-app, vue-cli 等都使用了 lerna.

在没使用 lerna 时, 我们不同库的组织形式可能如下:

lerna + dumi + eslint多包管理实践

使用 lerna 之后的库组织结构:

lerna + dumi + eslint多包管理实践

以上两个是我做的简图, 基本可以对比出使用 lerna 前后的差异, lerna 的作用是把多个项目或模块拆分为多个 packages 放入一个git仓库进行管理。我们可以使用它提供的命令轻松的对不同项目进行管理 , 如下:

  • lerna boostrap 自动解决packages之间的依赖关系,对于packages内部的依赖会直接采用symlink的方式关联
  • lerna publish 依赖git检测文件改动,自动发布,管理版本号
  • lerna create 创建一个 lerna 管理的package包
  • lerna clean 删除所有包下面的node_modules目录,也可以删除指定包下面的node_modules

同时 lerna 还会根据 git 提交记录,自动生成 changelog. 当然 lerna 还提供了很多有用的命令, 大家感兴趣可以在官网学习.

接下来我就带大家从零搭建一个使用 lerna 管理的多包项目.

lerna + dumi + eslint多包管理实践

上图是我们包的依赖关系, 首先我们需要全局安装一下 lerna.

项目初始化

$ git init best-cps && cd best-cps
$ lerna init

创建三个 package

$ lerna create LibA && lerna create LibB && lerna create BaseUI

创建的每个包的目录结构如下:

LibA
├─ tests
│ └─ dooring.test.js
├─ lib
│ └─ dooring.js
├─ README.md
└─ package.json

安装对应包的依赖

由上文展示的3个包的依赖关系, 我们需要针对性的安装, 如下:

$ lerna add LibA --scope=LibB

因为 LibB 依赖 LibA, 所以我们使用 lerna add 时可以通过 --scope 来指定安装范围. 再比如 BaseUI 同时依赖LibA, LibB 两个包, 我们可以使用如下命令:

$ lerna add LibA LibB --scope=BaseUI

剩下的我们都可以按照上述的方式进行, 当我们编写完对应包的代码后, 我们还可以使用:

$ lerna publish

一键将包发布到 npm 上, 此处根据我们选择的管理模式不同,所有 packages 的版本号都会根据lerna.json中的版本号进行更新。但我们需要注意的是 lerna 版本更新支持两种模式:

  • 固定/锁定模式(默认, 指定版本号)

这种模式自动将所有 packages 包版本捆绑在一起,对任何其中一个或者多个 packages 进行重大改动都会导致所有 packages 的版本号进行更新。

  • 独立模式(independent)

独立模式,init的时候需要设置选项--independent。这种模式允许使用者对每个package单独改变版本号。每次执行lerna publish的时候,针对所有有更新的package,会逐个询问需要升级的版本号,基准版本为它自身的package.json里面的版本号。这种情况下,lerna.json的版本号不会变化, 默认为independent。 我们可以在 lerna 初始化时指定:

lerna init --independent

具体的案例可以参考: https://github.com/MrXujiang/best-cps

如何高效低成本的搭建简单易用的组件文档

对于组件文档, 市面上也有很多开源的工具, 比如 vue-press, storybook, docz等, 因为我最近的项目多为 react, 这里我使用的是 dumi. 之前在分享实现滑动验证码组件的时候已经和大家分享的 dumi的使用, 大家可以参考我之前的文章:

以下是在 lerna 项目中集成 dumi 后的文档站点效果:

lerna + dumi + eslint多包管理实践

如何配置eslint代码规范和代码提交规范

eslint 代码规范我想每个朋友都不陌生, 我们只需要安装对应的插件并编写对应规则的配置文件即可, 这里举一个简单的例子:

// .eslintrc.js
module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
  rules: {
    'import/no-extraneous-dependencies': 0,
    'import/no-unresolved': 0,
  },
};

配置好之后我们需要设置检测时机, 比如说时运行时检测还是提交时检测, 由于个人习惯和效率问题, 我采用了提交时检测, 也就是当开发者功能开发完成, 执行 git commit 的时候进行检测, 我们可以利用 githook 来做预提交检测, 这里需要在 package.json 文件中添加如下命令:

"gitHooks": {
    "pre-commit": "npm run lint:js"
  },

配置好之后我们随便写一行不合规范的代码, 然后提交, 终端会显示如下信息:

lerna + dumi + eslint多包管理实践

从控制台可以发现代码不合规范的位置和原因, 如果我们没有做出调整, 代码就无法提交, 通过这样的方式可以提高代码质量和出错概率, 非常有长远价值.

同时上面提到了 githooks, 对于 githooks 的知识也非常有意思, 它可以帮我们在代码提交的不同阶段进行自定义操作, 比如代码提交前的检测, 代码提交信息规范等进行校验, 常用的 gtihooks 有:

  • pre-commit
  • prepare-commit-msg
  • commit-msg
  • post-commit
  • pre-rebase
  • post-merge
  • pre-receive
  • update

大家感兴趣的可以访问 https://githooks.com 获取更多有关 githooks的内容.

对于代码提交规范, 我们也需要做统一管理, 这样能让团队更直观的知道每一次提交的内容是什么, 尤其是多人协作的时候. 以下是几个常见的提交不规范的例子:

git commit -m '添加弹窗'
git commit -m ':update 更新'
git commit -m 'fix 修复一个bug'

之所以会存在以上提交格式不统一或者提交信息难懂的问题, 都是因为缺少了规范的制约, 所以说对于大型项目或者多人协作的项目, 最好还是统一规范, 这样能提前避免很多不必要的麻烦.

要想实现对工程师提交信息的检测, 需要用到 commit-msg 这个 githooks, 具体配置如下:

"gitHooks": {
    "pre-commit": "npm run lint:js",
    "commit-msg": "node ./commitlint.js verify-commit"
  }

剩下的就是 commitlint.js 做的事情了, 它是我编写的一个 nodejs 脚本, 用来检测用户提交的信息是否规范, 当然大家也可以基于这个脚本定义自己的提交规范, 具体效果如下:

lerna + dumi + eslint多包管理实践

我们可以看到, 当我们提交了一个不符合规范的信息之后, 终端控制台会打印如下提示信息并终止程序继续进行.

通过以上的配置, 团队不同成员的写的代码和提交信息都会非常统一和规范, 项目整体的质量也会得到一定的提升.

最后

如果大家对可视化搭建或者低代码/零代码感兴趣,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端真正的技术。

更多推荐

收藏
评论区

相关推荐

30分钟教你优雅的搭建nodejs开发环境及目录设计
前言 笔者最近在工作之余,一直在做数据可视化和nodejs方面的研究,虽然之前的web工作中接触过nodejs和可视化相关的内容,但是没有一个系统的总结和回顾,所以为了更深入的研究和复盘我的nodejs和数据可视化之路,笔者将会花两个月的时间,做一个彻底的复盘. Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,
每天学点 JS 编码规范(2):Objects
(给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kakaka Hou 为什么要在前端大全推送这个系列? 前段时间有读者通过我的个人微信,提议能不能推送一些编程规范的文章。我们以前关注过 Airbnb 在 GitHub 上开源的 JS 编程规范(现在有10万 star,可见受欢迎程度),但因为篇幅太长,一直没有推送过。现在化整为零,设立这
VSCode 插件之 ESLint
vscodeeslint github.com/microsoft/v…(https://github.com/microsoft/vscodeeslint) 为了区分 npm ESLint 包和 VSCode 的 ESLint 插件,我把前者称为 npm ESLint,后者称为 vscodeeslint。 vscodeeslint 优先
30分钟教你优雅的搭建nodejs开发环境及目录设计
前言笔者最近在工作之余,一直在做数据可视化和nodejs方面的研究,虽然之前的web工作中接触过nodejs和可视化相关的内容,但是没有一个系统的总结和回顾,所以为了更深入的研究和复盘我的nodejs和数据可视化之路,笔者将会花两个月的时间,做一个彻底的复盘. Node.js是一个事件驱动I/O服务端JavaSc
安利一些强无敌的 NPM 软件包
实用工具 Lodashlodash是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。 安装及示例yarn add lodash 不要滥用,尽量使用 ES 自带方法 。我常用的一些方法如下// 深度比较两个对象的值是否全相等 import isEqu
@JavaScript程序员,如何写出令人惊叹的高级代码?
### △ 是新朋友吗?记得先点web前端学习圈关注我哦~ ![](https://oscimg.oschina.net/oscnet/332f31ec-5040-43fa-90fa-06a0b296c308.jpg) > 各种包管理器到ESLint,从CommonJS到AMD,再从ES6模块到Babel和Webpack,好多工具啊! ![](http
vscode中配置eslint
安装Nodejs,然后安装eslint 使用全局安装: npm install -g eslint npm install -g eslint-plugin-react npm install -g eslint-plugin-html 安装完毕后,我们使用"eslint --init"命令在用户目录中生成一个配置文件(也可以在任何你喜欢的位
vscode的eslint插件不起作用
最近在用vue进行开发,但是vsCode中的eslint插件装上之后不起作用 1.vsCode打开“设置”,选择"settings.json" ![](https://img2018.cnblogs.com/blog/921637/201905/921637-20190516165707540-1304630667.png) 2.输入一段脚本
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
Anaconda中常用的用法
Anaconda中常用的用法 ============== conda 是开源包(packages)和虚拟环境(environment)的管理系统。 * **packages 管理:** 可以使用 conda 来安装、更新 、卸载工具包 ,并且它更关注于数据科学相关的工具包。在安装 anaconda 时就预先集成了像 Numpy、Scipy、 pan
FuelPHP 系列(三)
**框架封装好的 model 类有几个,按需继承就好。** **有:/fuel/core/classes/model/crud.php** **/fuel/packages/orm/classes/model.php** **/fuel/packages/orm/classes/model/soft.php  包含软删除的相关方法** **/f
Node.js 项目 TypeScript 改造指南
前言 -- 如果你有一个 Node.js 项目,并想使用 TypeScript 进行改造,那本文对你或许会有帮助。 TypeScript 越来越火,本文不讲为什么要使用 TypeScript,也不讲基本概念。本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造,包括目录结构调整、TypeScript-ESLint 配置、ts
Vue 项目中 ESlint 配置
前言 -- 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了。 一、eslint 安装 ----------- ### 1、全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以使用eslint的全局命令进行代码规则操作,但是这对我们的意义并不大,后续会详细介绍; 全局安装之后
vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)
目标 搭建vue + electron的工程 主要步骤 构建初始化工程 创建vue3 工程使用vuecli 工具创建一个vue3工程vue ui使用网页创建,注意vue版本选3.0,构建工具选择yarn::: tip 选择yarn工具:::::: tip 手动选择依赖:::::: tip 开启vuex vuerouter eslint less 等功能
lerna + dumi + eslint多包管理实践
背景在开发大型项目时, 我们通常会遇到同一工程依赖不同组件包, 同时不同的组件包之间还会相互依赖的问题, 那么如何管理组织这些依赖包就是一个迫在眉睫的问题.我们目前已有的方案有: Multirepo(多个依赖包独立进行git管理) 和 Monorepo(所有依赖库完全放入一个项目工程). Multirepo的缺点在于每个库变更之后,需要发布到线上,然后在项目