【Web技术】1473- 用 lerna 这样管理项目也太爽了吧！

494次阅读  |  发布于2年以前

关于代码库管理，一般是两种常见方案：

multirepo

monorepo

以上两种方式，孰优孰劣是个“哲学”问题。但对于团队内的「公共组件」而言，我认为monorepo模式更加合理(效率不一定会更高)。

为什么呢？

因为同一个团队内，组件之间避免不了会出现相互依赖的情况。设想一下：

有两个模块，module-a和module-b，module-b依赖于module-a。 这时发现，module-a有个bug，需要发bugfix版本：

没错，一些「工具」指的就是lerna。

lerna

⚠注意：以下内容并不是lerna的使用教程， 「lerna使用教程[1]」。

是什么?

The Original Tool forJavaScript Monorepos.

用于TypeScript/JavaScript monorepo 的原始工具。

怎么用？

自己去看文档[2]。

同学A：我想发个 npm 包，要怎么搞？

我：首先clone仓库下来，然后在packages目录下创建个文件夹A，然后在A里npm init，然后配置相关的打包工具.....开发完后就参照lerna文档进行发布......

同学A：比新建个仓库还麻烦，npm publish不能发布吗？

我：......

确实是，这么一套下来，比新建仓库发布更麻烦，还要去查阅lerna的文档来怎么进行构建和发布。再说，程序员‍怎么能容忍手动创建文件夹这种事情发生！所以，得想办法解决掉这些“麻烦”。最后的解决方案，就是封装。

封装

更通俗的说，就是「化繁为简」。

封装的思路主要有 六 部分：

$ npm run create
复制代码
$ npm run link
复制代码
$ npm run test
复制代码
$ npm run build
复制代码
$ npm run version
复制代码
$ npm run release
复制代码

这样，只要知道自己当前的步骤，就不用查看文档，直接运行 ⬇️ ：

$ npm run 「步骤」
复制代码

一步到位！

演示

接来下，将会演示 lernanpm-yxutils 和 lernanpm-yxtest 的「创建」、「安装」、「开发」、「测试」、「构建」、「发布」、「依赖连接」、「同步构建发布」。

创建

运行 ⬇️ ，创建项目：

$ npm run create
复制代码

可以看到在packages下，新增了yxtest和yxutils两个项目。

安装

运行 ⬇️ ，安装项目所需的依赖：

$ npm run link
复制代码

link.gif

选择「默认」安装方式，这样所有项目的依赖都会被安装。

开发

添加say方法到yxutils中，⬇️ ：

lerna-npm/packages/yxutils/src/features/index.ts

/**
 * 打印
 * @return {string} val 打印内容
 */
interface Isay {
  (val: string): void
}
export let say: Isay
say = (val: string) => {
  console.log(val)
}
复制代码

添加printName方法到yxtest中，⬇️ ：

lerna-npm/packages/yxtest/src/features/index.ts

/**
 * 打印名字
 * @param { string } sFirstName
 * @param { string } sFirstName
 * @returns { void }
 */
interface IprintName {
  (sFirstName: string, sLastName: string): void
}
export let printName: IprintName
printName = (sFirstName: string, sLastName: string) => {
  console.log(sFirstName + sLastName)
}
复制代码

测试

编写测试代码

lerna-npm/packages/yxutils/__test__/index.spec.ts

import { say } from '../src/index'

describe('utils ', () => {
  test('This is say test', () => {
    const consoleSpy = jest.spyOn(console, 'log')
    say('hello')
    expect(consoleSpy).toHaveBeenCalledWith('hello')
  })
})
复制代码

lerna-npm/packages/yxtest/__test__/index.spec.ts

import { printName } from '../src/index'

describe('test ', () => {
  test('This is printName test', () => {
    const consoleSpy = jest.spyOn(console, 'log')
    printName('yx', 'chan')
    expect(consoleSpy).toHaveBeenCalledWith('yxchan')
  })
})
复制代码

运行 ⬇️ ，进行jest测试：

$ npm run test
复制代码

test.gif

构建

运行 ⬇️ ，进行项目构建：

$ npm run build
复制代码

build.gif

选择「默认」构建方式，这样所有「未被构建过」 or 「有代码变动」的项目都会被构建（也可以选择「自定义」模式，选择构建「一个」or「多个」指定项目）。

可以看到的yxutils和yxtest目录下都多了个代码打包后生成的dist目录。

版本

紧接着，来到「更新版本号」。在进行这一步之前，要先确保「提交代码」。

version.gif

此时，会自动打上tag，并且推送到「远程仓库」：

$ git tag
// lernanpm-yxtest@0.0.1
// lernanpm-yxutils@0.0.1
复制代码

发布

运行 ⬇️ ，一键发布。

$ npm run release
复制代码

release.gif

至此，已经完成发布一个独立的「npm包」的完整流程。

依赖连接

yxtest中的printName方法内其实可以调用yxutils已经封装好了say方法。

因此，可以在yxtest中连接yxutils，然后使用say方法。

运行 ⬇️ ：

$ npm run link
复制代码

选择「自定义」模式，选择 yxtest 为「目标Module」，lernanpm-yxutils为「依赖名称」，dependencies为「依赖位置」。

此时，可以在yxtest的package.json中的dependencies看到，lernanpm-yxutils已添加成功。

修改代码:

lerna-npm/packages/yxtest/src/features/index.ts

import { say } from 'lernanpm-yxutils'
/**
 * 打印名字
 * @param { string } sFirstName
 * @param { string } sFirstName
 * @returns { void }
 */
interface IprintName {
  (sFirstName: string, sLastName: string): void
}
export let printName: IprintName
printName = (sFirstName: string, sLastName: string) => {
  say(sFirstName + sLastName)
}
复制代码

然后，再跑一遍「测试」、「构建」、「版本」、「发布」流程。

同步构建发布

在上一步骤，已经让yxtest与yxutils建立了连接，接下来尝试修改yxutils。

lerna-npm/packages/yxutils/src/features/index.ts

/**
 * 打印
 * @return {string} val 打印内容
 */
interface Isay {
  (val: string): void
}
export let say: Isay
say = (val: string) => {
  console.log(val.split('').join(''))
}
复制代码

可以看到，因为yxtest依赖了yxutils，即使yxtest没有代码改动，也被同步「打包」、「构建」、「发布」了。

实现

项目地址：lerna-npm[3]

创建

主要是为了解决「_在packages目录下创建个文件夹A，然后在A里npm init，然后配置相关的打包工具_」这个繁琐的过程。

lerna-npm/scripts/create/index.ts

entry

/**
 * 程序入口
 * @param {object} payload sModule(模块名)、sDescription(模块描述)、sName(作者名称)
 * @returns {void}
 */
interface Ientry {
  (payload: { sModule: string; sDescription: string; sName: string }): void
}
let entry: Ientry
entry = ({ sModule, sDescription, sName }) => {
  if (!sModule) {
    console.log(chalk.red(`[ERROR] The package name can not be empty!`))
    return
  }
  console.log(chalk.blue(`[INFO] Start creating "${sModule}"...`))
  const foldPath = createFold(sModule)
  if (!foldPath) return
  pullLocalTemp(foldPath, sModule, sDescription, sName)
    .then(() => {
      console.log(
        chalk.green(
          `[SUCCESS] Congratulations! The "${sModule}" create successfully!`
        )
      )
    })
    .catch(() => {
      console.log(chalk.red(`[ERROR] Sorry! The "${sModule}" create failed!`))
      // 删除创建失败的项目
      rimraf(foldPath, () => {
        console.log(chalk.blue(`[INFO] Delete "${sModule}" package fold!`))
      })
    })
}
复制代码
  1. 通过 inquirer[4] 工具，拿到命令行交互后的数据sModule、sDescription和sName；
  2. 把相关参数传入entry函数；
  3. 创建名为sModule的文件夹；
  4. 通过pullLocalTemp函数写入模板内容；
  5. 如果项目创建失败就删除已创建的文件夹；

接下来看看pullLocalTemp干了什么：

pullLocalTemp

/**
 * 拉取模板，生成目标项目
 * @param {string} sDestpath 文件夹路径
 * @param {string} sModule 模块名
 * @param {string} sDescription 模块描述
 * @param {string} sName 作者名称
 * @returns {Promise<boolean>}
 */
interface IpullLocalTemp {
  (
    sDestpath: string,
    sModule: string,
    sDescription: string,
    sName: string
  ): Promise<boolean>
}
let pullLocalTemp: IpullLocalTemp
pullLocalTemp = (
  sDestpath: string,
  sModule: string,
  sDescription: string,
  sName: string
) => {
  return new Promise((resolve, reject) => {
    const metadata = {
      pkgName: sModule,
      pkgCamelName: toCamel(sModule),
      description: sDescription,
      name: sName
    }
    // 把文件转换为js对象
    Metalsmith(__dirname)
      .metadata(metadata) // 需要替换的数据
      .source(sTempPath) // 模板位置
      .destination(sDestpath) // 目标位置
      .use((files, metalsmith, done) => {
        // 遍历需要替换模板
        Object.keys(files).forEach(fileName => {
          // 需先转换为字符串
          const fileContentsString = files[fileName].contents.toString()
          // 重写文件内容
          files[fileName].contents = Buffer.from(
            // 使用定义的metaData取代模板变量
            Handlebars.compile(fileContentsString)(metalsmith.metadata())
          )
        })
        done(null, files, metalsmith)
      })
      .build(function (err) {
        if (err) {
          console.log(chalk.red(`[ERROR] Metalsmith build error!`))
          reject(false)
          throw err
        }
        resolve(true)
      })
  })
}
复制代码

这个函数的功能很简单，就是使用 metalsmith[5] 把相关参数传入template中，替换掉对应坑位中的内容，然后输出模板。

目前支持的模板：

安装

同学A: npm i 不能安装依赖？

该封装主要是解决依赖「安装位置」问题以及「链接依赖」问题。

设想一下，假如packages下有两个模块，module-a和module-b：

  1. 该模块都引用了第三方模块lodash。如果正常install，则在module-a和module-b的node_modules下都包含lodash，这样就会造成空间的浪费。针对这种情况，应该把多次引用的第三方模块提升至顶层的node_modules；
  2. module-b依赖了module-a，在module-b的代码中引用module-a暴露的方法。这种情况就比较麻烦了(npm link)，虽然有解决方案，但并不完美；

很幸运，lerna提供了lerna run build，能完美解决以上两种情况。

所以，要做的就是对lerna run build命令的封装。很简单，通过「问答」，拿到「安装模式」、「依赖名称」、「项目名称」、「安装位置」，再构造lerna命令。

scripts/link/link.ts

/**
 * 安装依赖
 * @param {Object} payload sInstallType(安装模式)、sInstallModule(依赖名称)、sTargetModule(项目名称)、sOption(安装位置)
 * @returns {void}
 */
interface Iinstall {
  (payload: {
    sInstallType: string
    sInstallModule?: string
    sTargetModule?: string
    sOption?: string
  }): void
}
let install: Iinstall
install = ({ sInstallType, sInstallModule, sTargetModule, sOption }) => {
  // 一键安装
  if (sInstallType === 'all') {
    run('lerna', ['bootstrap', '--hoist'])
    // 自定义安装
  } else {
    run(
      'lerna',
      ['add', sInstallModule || '', `--scope=lernanpm-${sTargetModule}`].concat(
        sOption === 'normal' ? [] : [`--${sOption}`]
      )
    )
  }
}
复制代码

有「安装』，当然也有「卸载」。同理也是通过「问答」的模式，拿到「项目名称」(需要卸载依赖的项目)、「依赖名称」，再构造lerna命令。

scripts/link/unlink.ts

/**
 * 卸载依赖
 * @param {Object} payload sTargetModule(目标项目)、sDelModule(卸载依赖名称)
 * @returns {void}
 */
interface Iuninstall {
  (payload: { sTargetModule: string; sDelModule: string }): void
}
let uninstall: Iuninstall
uninstall = ({ sTargetModule, sDelModule }) => {
  run('lerna', [
    'exec',
    `--scope=lernanpm-${sTargetModule}`,
    `npm uninstall ${sDelModule}`
  ])
}
复制代码

测试

同理。

有两种测试模式：

  1. 全量：运行「全部」项目的测试
  2. 自定义：运行「特定」项目的测试

scripts/test/index.ts

/**
 * 测试项目
 * @param {Object} payload sTestType(测试模式)、sTargetModule(目标项目)
 * @returns {void}
 */
interface Itest {
  (payload: { sTestType: string; sTargetModule?: string }): void
}
let test: Itest
test = ({ sTestType, sTargetModule }) => {
  // 默认测试方式
  if (sTestType === 'all') {
    run('lerna', ['run', 'test', '--no-sort'])
    // 自定义测试方式
  } else {
    run('lerna', ['run', 'test', `--scope=lernanpm-${sTargetModule}`])
  }
}
复制代码

构建

同理。

有两种构建模式：

  1. 全量：构建「所有」项目
  2. 自定义：构建「特定」项目

scripts/build/index.ts

/**
 * 构建项目
 * @param {Object} payload sBuildType(构建模式)、vPackages(项目名称)
 * @returns {void}
 */
interface Ibuild {
  (payload: { sBuildType: string; vPackages?: Array<string> }): void
}
let build: Ibuild
build = ({ sBuildType, vPackages }) => {
  // 默认构建方式
  if (sBuildType === 'all') {
    run('lerna', ['run', 'build'])
    // 自定义构建方式
  } else {
    vPackages &&
      vPackages.forEach(async pkg => {
        await run('lerna', ['run', 'build', `--scope=lernanpm-${pkg}`])
      })
  }
}
复制代码

版本

lerna提供的版本号构建命令，可供选择的参数不多，而且自带「问答」模式，固毋需对命令再封装。

"version": "lerna version"
复制代码

⚠️注意：得益于 nx[6]，「有代码改动」& 与其有「依赖关系」的项目都会被重新构建新的版本号。

发布

lerna提供的发布命令，可供的选择也是不多，也是自带「问答」模式，亦毋需对命令再封装。

"release": "lerna publish from-package"
复制代码

⚠️注意：所有被「新构建过版本号」的项目，都会被发布。

注意

  1. 使用npm run link连接packages的其它模块时，要确保该模块与当前模块是高度耦合的，并且稳定、可靠；
  2. 确保在开发某个模块时，只改动「当前模块」的代码！因为，任何模块的代码改动都会被识别，即使被改动模块没有被重新构建，版本亦会被更新发布；
  3. 若要卸载某个模块的依赖，可以运行npm run unlink；
  4. 单独执行某个模块的测试，可以运行npm run test；
  5. npm run version失败的情况一般分两种：

6 . 删除某个模块的特定版本，可以运行npm unpublish moduleName@version(不建议，直接发个新版本覆盖更合理)，然后删除本地和远程相关的tag；

7 . 查看packages下模块之间的引用关系，可以npx nx graph；

最后

由于时间关系，项目还有很多可以优化的地方，好比如：支持多模板、丰富命令参数等等。目前只是对lerna最基础的参数进行封装，基于「简单」的原则，很多参数比较少用到，所以并没有封装在里面。但可以直接使用lerna的命令运行。

By the way，这是我第一篇掘金文章，很感谢你能看到这里。祝你工作顺利、生活愉快！

「--- The end ---」

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8