Lerna

lerna最近在看vue-cli的源码局部，留神到这一个仓库下保护了多个package，很好奇他是如何在一个repo中治理这些package的。 咱们组当初也在应用组件库的形式保护我的项目间共用的业务代码。有两个组件库，存在依赖的关系，目前联调是通过npm link的形式，性能并不好，时常呈现卡顿的问题。加上前一段时间组内分享vue3也提到了lerna，于是便决定认真的调研一下这个工具，为接下里的组件库优化助力。 lerna的文档还是很具体的,因为全是英文的，思考到浏览问题，这里我先是本人跑了几个demo，而后做了中文翻译。后续我会出一篇专门的lerna实战篇 demo lerna 是干什么的？Lerna 是一个工具，它优化了应用 git 和 npm 治理多包存储库的工作流。 背景1.将一个大的 package 宰割成一些小的 packcage 便于分享，调试 2.在多个 git 仓库中更改容易变得凌乱且难以跟踪 3.在多个 git 仓库中保护测试繁琐 两种工作模式Fixed/Locked mode (default)vue,babel 都是用这种，在 publish 的时候,所有的包版本都会更新，并且包的版本都是统一的，版本号保护在 lerna.jon 的 version 中 Independent modelerna init --independent独立模式，每个 package 都能够有本人的版本号。版本号保护在各自 package.json 的 version 中。每次公布前都会提醒曾经更改的包，以及倡议的版本号或者自定义版本号。这种形式绝对第一种来说，更灵便 初始化我的项目npm install -g lerna // 这里是全局装置，也能够装置为我的项目开发依赖，应用全局不便前期应用命令行mkdir lerna-repocd lerna-repolerna init // 初始化一个lerna我的项目构造，如果心愿各个包应用独自版本号能够加 -i | --independent 规范的 lerna 目录构造每个独自的包下都有一个 package.json 文件如果包名是带 scope 的，例如@test/lerna，package.json 中，必须配置"publishConfig": {"access": "public"}my-lerna-repo/ package.json lerna.json LICENSE packages/ package-1/ package.json package-2/ package.json启用 yarn Workspaces （强烈建议）Workspaces can only be enabled in private projects. ...

目前网上lerna的教程不是很分明, 所以我本人整顿并且实际的笔记 创立我的项目$ mkdir lerna-repo && cd lerna-repo$ npm init// 本地目录装置 $ npm i lerna -D$ npx lerna init// or 全局装置$ npm install --global lerna$ lerna init目录构造 lerna-repo/ packages/ core/ utils/ package.json lerna.json这里咱们将我的项目分成2个子包, 前面会教大家创立一个core子项目, 一个utils子项目 lerna create创立子包lerna create <name> [loc(指定目录)]// lerna create core// lerna create utilslerna add装置依赖lerna add <package>[@version] [--dev] [--exact] [--peer]比方 lerna add fetch package目录下的子项目都会装置到 指定package装置(utils名称的子项目) lerna add fetch packages/utils/命令常用命令lerna link链接子包与子包之间的依赖(本地)# core/ package.json..."dependencies": { "fetch": "^1.1.0", "@xxx/utils": "^1.0.4" // xxx为对应子包utils下面的package.json中的name},...接下来运行lerna linknode_modules增加的包地址指向本地子包utils ...

本文首发于：https://www.kelen.cc/posts/lerna-study lerna是什么在lerna官网上形容到，lerna 是一种工具，针对git和npm治理多软件包代码仓库的工作流程进行优化。 为什么要应用它？次要为了解决我的项目之间包（package）的依赖关系，比方大型项目外面，咱们会把我的项目分成若干个模块包，各个模块包之间互相援用，这时候如果一个包（A）的版本做了变更，其余依赖的包都须要针对这个包（A）的版本进行更改，可想而知，工作量十分大而且还容易脱漏。 目前很多大型项目 Babel 等等。都会应用 lerna 来治理我的项目包。 lerna作用总结解决packages之间依赖变动主动同步更新git提交扭转，主动公布，主动生成变更日志lerna实战lerna创立的我的项目目录构造如下 lerna-repo/  packages/  package.json  lerna.jsonlerna我的项目初始化首先须要全局装置lerna npm install lerna -g咱们来创立一个我的项目和 package.json mkdir lerna-example && yarn init// package.json{  "name": "lerna-example",  "private": true,  "workspaces": [    "packages/*"  ],  "version": "1.0.0",  "main": "index.js",  "author": "kelen <[email protected]/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */>",  "license": "MIT"}而后 lerna.json 新增两个配置 {  ...  "useWorkspaces": true,  "npmClient": "yarn"}接下来创立两个包，别离为 module-a 和 module-b // module-a/index.jsconst {  add} = require('module-b');console.log(add(1, 2, 3))// module-b/index.jsmodule.exports = {  add(...args) {    return args.reduce((prev, curr) => prev + curr, 0);  }}模块之间依赖下面的 module-a 引入了 module-b 的 add 办法，咱们怎么把依赖给关联起来呢？能够通过 lerna add 命令 ...

前言GithubBlog：https://github.com/Nealyang/PersonalBlog/issues/99 背景如是： pmlci 源码脚手架：https://mp.weixin.qq.com/s/JRF4GjYqXw1f6jGqcYofnQ随着脚手架的提供，以及新增页面和模块的性能封装。 毕竟 多提供一层标准，就多了一层束缚。 而架构的实质是为了让开发者可能将精力更加的focus 到业务的开发中，无需关怀其余。比方上述脚手架初始化进去的一些模块配置、异步加载甚至一些已定义并且保留在初始化架构中的一些业务 hooks 等。 如上起因，我心愿可能提供一套可视化的操作（创立我的项目、抉择依赖、增加页面，抉择所需物料、配置物料属性等），一言以蔽之就是让用户对于源码开发而言，只须要编写对应的业务模块组件，而不需治理架构是如何组织模块和状态散发的，除了业务模块编码，其余都是可视化操作。 因为团队里 100%的同学都是以 vscode 作为饭碗，所以自然而然的 vscode extinction 就是我的第一抉择了。打算中会提供创立我的项目、新增页面、模块配置、页面配置、新增模块等一系列插件。后续阶段性停顿，再发文总结。咳咳，是的，这将是一个源码工作台的赶脚~ 截止目前，曾经将我的项目的脚手架根本搭建了个 90% ，此处作为第一阶段性总结。 成绩展现 extensions 文件夹为 vscode 插件的文件夹、packages 文件夹是寄存公共的组件、scripts 为公布、构建、开发的脚本，其余就是一些工程配置。 当然，这里最次要不是产品性能的展现，嘎嘎~packages.json scripts "scripts": { "publish": "lerna list && publish:package", "publish-beta": "lerna list && npm run publish-beta:package", "start":"tnpm run start:packages && tnpm run start:extensions", "start:packages": "tnpm run setup:packages && tnpm run packages:watch", "start:extensions":"tnpm run extensions:link", "commit": "git-cz", "env": "node ./scripts/env.js", "packages:link": "lerna link", "packages:install": "rm -rf node_modules && rm -rf ./packages/*/node_modules && rm -rf ./packages/*/package-lock.json && SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ yarn install --registry=http://registry.npm.taobao.org", "packages:clean": "rm -rf ./packages/*/lib", "packages:watch": "ts-node ./scripts/watch.ts", "packages:build": "npm run packages:clean && ts-node ./scripts/build.ts", "setup:packages": "npm run packages:install && lerna clean --yes && npm run packages:build && npm run packages:link ", "publish-beta:package": "ts-node ./scripts/publish-beta-package.ts", "publish:package": "ts-node ./scripts/publish-package.ts", "extensions:install": " rm -rf ./extensions/*/node_modules && rm -rf ./extensions/*/package-lock.json && rm -rf ./extensions/*/web/node_modules && rm -rf ./extensions/*/web/package-lock.json && ts-node ./scripts/extension-deps-install.ts", "extensions:link": "ts-node ./scripts/extension-link-package.ts" }scripts 没有增加齐全，目前开发间接 npm start 公布 packages 别离为 npm run publish-beta:package 、 npm run publish:package ,下面也有 publish 的命令汇总。 ...

原生脚手架开发痛点剖析痛点一：反复操作 多package本地link多package依赖装置多package单元测试多package代码提交多package代码公布痛点二：版本一致性 公布时版本一致性公布后相互依赖版本升级package越多，治理复杂度越高lerna简介lerna is a tool that optimizes the workflow around managing repositories with git and npmlerna是一个优化基于git + npm的多package我的项目的管理工具 劣势大幅缩小反复操作晋升操作的标准化 Lerna是架构优化的产物，它揭示了一个架构真谛：我的项目复杂度晋升后，就须要多我的项目进行架构优化，架构优化的次要目标往往都是以人效为主的官网https://lerna.js.org lerna开发脚手架的流程