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

痛点

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

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 创立组织

新建组织后如下

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_modulestest

现增加提交代码

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 文件

成果如下

致谢

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