您的位置:首页 > 新闻 > 热点要闻 > 前端工程化3:使用lerna管理多包

前端工程化3:使用lerna管理多包

2025/1/7 23:34:59 来源:https://blog.csdn.net/franktaoge/article/details/141963315  浏览:    关键词:前端工程化3:使用lerna管理多包

1、 使用lerna管理多包

npm i lerna -g

2、使用lerna初始化项目

lerna init

初始化结构是这样的:
在这里插入图片描述

3、配置项目package.json文件

"scripts": {"preinstall": "npx only-allow pnpm","prepare": "husky install","init": "pnpm install","clean": "lerna run clean $$ rm -rf node_modules","test": "lerna run test","docs:dev": "vuepress dev docs","docs:build": "vuepress build docs","deploy":"bash deploy.sh","publish": "lerna publish","lint": "markdownlint README.md","changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",},"publishConfig": {"access": "public","registry": "https://registry.npmjs.org/"}
  1. preinstall:: "npx only-allow pnpm" 项目中只能用pnpm包管理工具
  2. "prepare": "husky install"使用husky关联git hooks模版,为了加入commitlint
  3. "deploy":"bash deploy.sh"发包管理,打好的包拷贝到远程的repository,使得其他的开发者或者工程可以共享
  4. "publish": "lerna publish"这里的publish会把packages中的多宝都publish
  5. "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"这里的changelog需要先全局安装,后面会讲

4、创建pnpm-workspace.yaml文件

"pnpm-workspace.yaml" 是 pnpm 管理的多包(monorepo)项目中用于定义工作区设置的文件。如果您在初始化项目时遇到创建这个文件的提示,通常是因为你正在使用支持 pnpm 工作区功能的工具或框架

使用命令行创建:

echo -e "packages: - 'packages/*'" > pnpm-workspace.yaml

5、使用lerna创建分包

lerna create demo1

现在就能在packages中看到新建的分包,结构这样:
在这里插入图片描述

6、配置分包主入口文件

package.json文件中修改:

  "main": "index.js",

同时创建一个index.js文件,把默认的lib文件夹删除即可

7、发布npm包

pnpm run publish

8、git action云构建

在git内配置action

持续更新中。。。。。。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com