中级前端必备技能-脚手架开发

代码渔夫
101 阅读4分钟

一、前言

以前的项目都是单个包项目。优点是简单，便于管理。但是，当一个大的项目库代码量剧增之后，管理起来就是一件比较麻烦的事情，为了方便代码的共享，就需要将代码库拆分成独立的包。
最近准备开发前端的一个模块化的库，要求可以任意插拔随意组合。大型工程，需要多人维护。 调研了一下lerna库，适合我们的场景，babel即用这个工具进行管理。

二、lerna基础

初始化：

$ npm i -g lerna    // 安装不上切淘宝镜像
$ mkdir lerna-repo && cd $_  // 新建目录
$ lerna init

生成文件路径如下：

**

lerna-repo/
  packages/
  package.json
  lerna.json

默认情况下，packages/下即保存多包地址。

管理模式

使用 Lerna 管理项目时的两种模式：固定模式（Fixed mode）和独立模式（Independent mode）。

  1. 固定模式（Fixed mode）：

    • 在固定模式下，默认情况是通过 lerna init 命令初始化项目，项目中的所有包（packages）共享一个版本号（version）。
    • 所有包都绑定到同一个版本号上，即任何一个包发生更新，整个项目的版本号都会随之改变。
    • Lerna 会自动维护版本一致性，确保所有包的版本号相同。

  2. 独立模式（Independent mode）：

    • 在独立模式下，可以通过 lerna init --independent 命令初始化项目。
    • 每个包都可以有独立的版本号，不再强制要求所有包共享一个版本号。
    • 使用 lerna publish 命令时，可以为每个包单独指定操作，甚至可以只更新某个包的版本号而不影响其他包。
    • 在独立模式下，lerna.json 文件中的 version 字段应设置为 "independent"。

简单来说，固定模式适用于所有包都共享相同版本号的情况，而独立模式允许每个包有自己独立的版本号，更加灵活。选择使用哪种模式取决于项目的需求和开发团队的管理偏好。

常用命令

在使用 Lerna 时，通过 lerna bootstrap 启动项目时的操作，这个命令是用来替代 npm install 的。

具体来说，lerna bootstrap 执行以下主要操作：

  1. 为每个包执行 npm install：

    • 对于每个在 packages 目录下的包，它会执行 npm install，安装依赖。

  2. 建立引用关系：

    • 根据每个包的 package.json 中的 dependencies 和 devDependencies 配置，使用符号链接（symlink）在每个包的 node_modules 目录下建立引用关系。
    • 这意味着各个包之间可以共享依赖，而不是每个包都拥有一份完整的依赖副本。

  3. 执行 npm run prepublish：

    • 在每个包中执行 npm run prepublish 脚本。这个脚本通常用于在发布之前进行一些准备工作。

  4. 执行 npm run prepare：

    • 在每个包中执行 npm run prepare 脚本。这个脚本通常用于在包安装后进行一些构建或准备工作。

总的来说，lerna bootstrap 帮助你在一个大型项目中管理多个包时，确保各个包之间的依赖关系正确，而不需要手动去处理这些问题。它提供了更方便的方式来初始化和准备项目。 2. 添加依赖

**

lerna add <pkg> [globs..]

/*
Add a dependency to matched packages

位置：
  pkg    Package name to add as a dependency                  [字符串] [必需]
  globs  Optional package directory globs to match             [数组] [默认值: []]
*/

例如目录结构为：

**

lerna-repo/
  packages/
    super-page-component/
      package.json
      index.ts
      node_modules/
      ...
    other-xxx-module/
      
  package.json
  lerna.json

给 super-page-component 添加 依赖 vue-class-component，scope后要跟package.json里面的名字，而不是文件夹名。如果全部安装，去掉scope即可。

**

lerna add vue-class-component --scope=@mfelibs/superpage-component
  1. 发布
    lerna publish 用于发布更新，默认发到npm上，如需修改可参考4。运行该命令会执行如下的步骤：
  • 运行lerna updated来决定哪一个包需要被publish
  • 如果有必要，将会更新lerna.json中的version
  • 将所有更新过的的包中的package.json的version字段更新
  • 将所有更新过的包中的依赖更新
  • 为新版本创建一个git commit或tag
  • 将包publish到npm上

同时，该命令也有许多的参数，例如--skip-git 将不会创建git commit或tag，--skip-npm将不会把包publish到npm上。

  1. 指定源
    如果你的项目并不是用npm管理，像我们一样，可以在需要的操作上都指定源。
    例如使用yarn管理包 lerna bootstrap --npm-client=yarn
    例如使用cnpm发布包 lerna publish --npm-client=cnpm（注意，3.x版本无效）

avatar
文章
阅读
粉丝