关于前端:前端项目复杂的包管理不知道怎么办来看这篇就够了

4次阅读

共计 3756 个字符，预计需要花费 10 分钟才能阅读完成。

痛点

日常开发中, 往往咱们在我的项目中援用的很多依赖包，然而随之依赖包的降级，咱们的我的项目之间的依赖就越来越难以保护，包与包之间版本的援用也让咱们头疼。

Lerna 包治理

正如官网所说的，Lerna 是一个管理工具，用于治理蕴含多个软件包（package）的 JavaScript 我的项目，对于应用 git 和 npm 治理多软件包代码仓库的工作流程进行了优化。

如何装置应用 Lerna

npm i lerna -g 全局装置

新建文件夹 teach-lerna, cd teach-lerna, 初始化我的项目 lerna init, 能够看到初始化我的项目的目录如下：

lerna 配置

lerna 配置如下:

{
  "version": "0.0.0",
  "workspaces": true,
  "npmClient": "yarn"
}

package.json 配置如下

{
  "name": "root",
  "private": true,
  "devDependencies": {"lerna": "^4.0.0"},
  "packages": ["packages/*"] 
}

lerna.json 中配置的 "npmClient": "yarn" 项是装置依赖通过 yarn 来执行装置的

npm 创立组织

登录 npmjs.com 注册后点击头像的 Add Organization 新建一个本人的组织

新建组织后如下

Lerna 创立包

创立 @bobocode-todos/utils 包

lerna create @bobocode-todos/utils 执行命令后输出相应的值

目录如下

同理创立 @bobocode-todos/request 包

lerna create @bobocode-todos/request

此刻咱们的 packages 文件夹上面就存在两个包

lerna 查看包

执行 lerna ls

lerna 同时为包增加依赖

以增加 lodash 为例, 只需在根目录下执行

lerna add lodash

lerna 为包独自装置依赖（--scope）

以增加 chalk 为例，为 @bobocode-todos/utils 包增加依赖

lerna add chalk --scope @bobocode-todos/utils

同理，以增加 axios 为例，为 @bobocode-todos/reques 包增加依赖

lerna add axios --scope @bobocode-todos/request

lerna 执行装置依赖, 会安装包上面所有的依赖

lerna bootstrap

lerna 执行清理依赖, 会清空所有的 node_modules

lerna clean

lerna 公布包流程

为了简略测试，批改 @bobocode-todos/utils 的 lib/utils.js

'use strict';

const chalk = require('chalk');

function utils() {console.log(chalk.blue('utils package!'));
}

module.exports = utils;

批改 @bobocode-todos/request 的 lib/request.js

'use strict';

const axios = require('axios');

function getDogImg() {
    let url = 'https://dog.ceo/api/breed/hound/images/random';
    axios.get(url).then(res => {console.log(res.data.message);
    })
}
getDogImg()
module.exports = getDogImg;

为两个包的都增加 .gitignore, 输出

node_modules
test

现增加提交代码

git add .

git commit -m "init project"

git remote add origin 本人的仓库地址

而后执行 npm login 登录 npm，输出用户名和明码，最初输出验证码

git push --set-upstream origin master 先 push 代码到仓库

最初执行 lerna publish 公布我的项目，能够看到 lerna 为咱们公布做了许多敌对的提醒

输出 y 批准执行

最初能够看到公布胜利

查看 github 仓库你会发现 git 帮你打 tag 为 v0.0.1

再查看 npmjs.com 你会发现两个包曾经胜利公布

测验包是否失常应用

咱们在跟目录新建 test 文件夹，新建文件 test.js, 并执行装置依赖 npm install @bobocode-todos/utils --save

test.js 如下

const utils = require('@bobocode-todos/utils');

utils();

配置增加到 package.json

"scripts": {"test": "node utils.test.js"},

执行 npm run test, 能够看到后果失常输入

独立为包的更新并公布

批改 utils 包下的 readme.md , 此文件批改提交后会成为 npm 包上的阐明文档

# `@bobocode-todos/utils`

> Install

`npm install @bobocode-todos/utils --save`

> Usage

```
const utils = require('@bobocode-todos/utils');

utils();
```

当你执行 lerna publish 时，会发现提醒两个包都要更新，然而当初咱们改的只是一个包的内容，这不是咱们想要的

批改配置 lerna.json，把版本换成 independent

{
  "version": "independent",
  "workspaces": true,
  "npmClient": "yarn"
}

再次执行 lerna publish , 你会发现提醒的是你方才须要更新的 @bobocode-todos/utils 包

查看 npm 会发现版本曾经更新

仓库也相应打 tag 0.0.2

lerna 公布同时更新日志 CHANGELOG

更新日志是我的项目开发流程种很重要的一环, 不便团队的代码保护

在跟目录执行

yarn add commitizen cz-conventional-changelog -D

package.json 增加配置如下

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "commitizen": "^4.2.4",
    "cz-conventional-changelog": "^3.3.0",
    "lerna": "^4.0.0"
  },
  "packages": ["packages/*"],
  "scripts": {
    "install": "lerna bootstrap",
    "commit": "git-cz",
    "clean": "rimraf node_modules && lerna clean -y"
  },
  "config":{
    "commitizen":{"path":"cz-conventional-changelog"}
  }
}

执行 git add . 后执行 yarn commit，插件失效

然而咱们执行 git commit -m "xxx" 时咱们发现 git commit 的 hooks 没被拦挡, 还是能够轻易提交

此时咱们须要装置 husky 和 commitlint 来拦挡标准提交

yarn add @commitlint/cli @commitlint/config-conventional husky -D

新建 commitlint.config.js 输出

module.exports = {extends:["@commitlint/config-conventional"]
}

在 package.json 减少一条命令

"prepare":"husky install"

执行 npm run prepare 能够看到我的项目生成 .husky 文件夹, 咱们就能够来创立拦挡 commit 的脚本

npx husky add "npx --no-install commitlint --edit"$1""

.husky 文件夹生成了 commit-msg

#!/usr/bin/env sh
. "$(dirname --"$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

再次执行发现提交被拦挡, 证实配置胜利了

lerna 配置生成 CHANGELOG

在 lerna.json 配置如下

{
  "version": "independent",
  "workspaces": true,
  "npmClient": "yarn",
  "command": {
    "version": {"message": "chore(release): publish %s"
    },
    "publish": {"conventionalCommits": true}
  },
  "ignoreChanges": ["**/__fixtures__/**", "**/__tests__/**", "**/*.md"]
}

通过执行 lerna publish --conventional-commits 能够公布版本的同时我的项目的 CHANGELOG.md 文件

成果如下

感激你看到这里，心愿本文对你有所帮忙，心愿大家不要悭吝本人的赞若有疑难或者倡议，欢送评论区留言，一起相互交换探讨，共同进步！🐶

正文完