Monorepo 和 Multirepo 是两种不同的源码管理理念，Monorepo 是把所有的相关项目都放在一个仓库中（例如：React, Angular, Babel, Jest, Umijs, ....Multirepo 缺点： repo不好找，如果你有很多子项目repo、仓库又很分散、相关负责人又请假了....呵呵； Issue 不知道往哪里提，项目管理混乱。 版本管理的日常开销大.......Monorepo 缺点： repo 体积变大。 需要额外的工具实现项目间的联合调试（例如：Jest 的 watch.js，监听子项目中文件的变化，动态编译）。...编译； 图：packages 目录中的子项目 ?...图：监控脚本运行效果 ?
翻译：Lerna是一个用来优化托管在 git\npm 上的多 package 代码库的工作流的一个管理工具,可以让你在主项目下管理多个子项目，从而解决了多个包互相依赖，且发布时需要手动维护多个包的问题。...注意：yarn install 无论在顶层运行还是在任意一个子项目运行效果都是可以。...并且在顶层 lerna.json 中增加配置 { "npmClient": "true" } 然后在顶层执行 yarn web 就可以运行 example-web 项目了。...注意⚠️：这里再次声明一下，如果使用了 independent 方式进行版本控制，在 packages 内部的包进行互相依赖时，每次发布之后记得修改下发布后的版本号，否则在本地调试时会出现刚发布的代码不生效问题...babel 使用的就是 lerna 进行管理 facebook/jest 使用的是 lerna 进行管理 alibaba/rax 使用的是 lerna 进行管理 lerna 弊端 和传统的 git submodules
而单一（mono）仓库（简称单仓，mono-repo）是指在一个仓库中管理多个模块或包，当代码规模达到一定程度后可称为大型规模仓库（简称大仓），至于这个程度大小并没有明确定义，通常说的大仓可理解为就是单仓...假设有多个工程依赖 lib，每个工程都会重复安装 lib lib 升级时，所有工程需各自升级，这点很难做到，往往各工程的依赖版本并不一致，由此经常引发一些调试和维护问题 多个工程间互相依赖且同时开发时调试相对困难...使用 Lerna 的开源项目有：jest、create-react-app、webpack-cli...最后，总的方案有以下几种： 方案 1：Lerna(NPM) 方案 2：Lerna(Yarn) 方案...", } 然后在根目录的 package.json 中配置 workspaces，此时 lerna.json 中的 packages 设置会失效： { "name": "root", "workspaces...从工作流的完整度上看，Lerna 会更全面，不过也有像babel/babel这种只使用了 Yarn Workspace，然后再额外开发一些插件的用法。
为了解决这些（以及许多其它）问题，某些项目会将 代码仓库分割成多个软件包（package），并将每个软件包存放到独立的代码仓库中。...但是，例如 Babel、 React、Angular、Ember、Meteor、Jest 等项目以及许多其他项目则是在 一个代码仓库中包含了多个软件包（package）并进行开发。...开始 全局安装 lerna $ npm install lerna -g 初始化 lerna 项目 $ lerna init --independent 你的代码仓库目前应该是如下结构： lerna-repo...$ yarn add -WD typescript lerna.json version: 当前仓库的版本，Independent mode 请设置为 independent npmClient: 指定运行命令的客户端程序...使用这个去阻止发布不必要的更新，比如修复 README.md message: 一个 publish 时的自定义 commit 信息。
比如，如果开发者选择了使用 TypeScript 以及英语环境构建项目，那么核心流程中在初始化 rolluo.config.js 文件时，我们读取 rollup.js.tmpl，并将相关信息（比如对 TS...比如，我提到 yarn workspace 和 lerna 配合构建流程，那么如何协调两者的关系呢？ 我暂时不回答这个问题，咱们从更基础更核心的内容看起。...在项目根目录 lerna.json 中，有这样的内容： { "version": "independent", // ... } 我们看到，version 选用的 independent 模式，...比如，我习惯使用 Jest 进行单元测试，那么 Jest 相关的 npm 脚本可以进行抽象，在新的项目 package.json 中引入： "scripts": { "test": "lucas-script...它会在当前的测试流程中，赋值相应的环境变量，判断 Jest 的运行是否需要进行监听（watch 参数），同时获取 Jest 配置，并最终运行 Jest。
在前端开发环境中，多 Git Repo，多 npm 则是这个理想的阻力，它们导致复用要关心版本号，调试需要 npm link。而这些是 MonoRepo 最大的优势。...Lerna 是一个管理多个 npm 模块的工具，是 Babel 自己用来维护自己的 Monorepo 并开源出的一个项目。优化维护多包的工作流，解决多个包互相依赖，且发布需要手动维护多个包的问题。...Lerna 现在已经被很多著名的项目组织使用，如：Babel, React, Vue, Angular, Ember, Meteor, Jest 。 一个基本的 Lerna 管理的仓库结构如下： ?...因为 dist 是 Babel 编译后的目录，我们在搜索时不希望搜索它的内容，所以在工程的设置中把 dist 目录排除在搜索的范围之外。 接下来，我们按上面的规范，搭建 package 的结构。...） 由于各 package 的结构统一，所以类似 Babel 这样的工具，只在根目录安装就好了，不需要在各 package 中安装，简直是清爽的要死了。
假设有多个工程依赖 lib，每个工程都会重复安装 lib lib 升级时，所有工程需各自升级，这点很难做到，往往各工程的依赖版本并不一致，由此经常引发一些调试和维护问题 多个工程间互相依赖且同时开发时调试相对困难...使用 Lerna 的开源项目有：jest、create-react-app、webpack-cli...最后，总的方案有以下几种： 方案 1：Lerna(NPM) 方案 2：Lerna(Yarn) 方案...判断版本号的字符串一模一样时才认为是同样的依赖，并不是特别的智能（后面介绍的 Yarn Workspace 是根据语义版本判断，无此问题）。...", }Copy to clipboardErrorCopied 然后在根目录的 package.json 中配置 workspaces，此时 lerna.json 中的 packages 设置会失效：...从工作流的完整度上看，Lerna 会更全面，不过也有像babel/babel这种只使用了 Yarn Workspace，然后再额外开发一些插件的用法。
'); 从表面上解决了长路径引用的问题（并没有解决项目结构深层嵌套的根本问题），使用非标准模块机制有几个典型的坏处： 与标准不和，接入标准生态中的工具时会面临适配问题 源码难读，不容易弄明白模块依赖关系...一般解法有2种： 运行时动态依赖（注入）：把两份都放进bundle，运行时根据配置或环境选择 构建时处理依赖：多构建几份，不同的bundle含有各自需要的依赖模块 显然构建时处理更干净一些，即mock...简言之，在prod bundle中把详细的报错信息替换成对应错误码，生产环境捕获到运行时错误就把错误码与上下文信息抛出来，再丢给错误码转换服务还原出完整错误信息。...检测，先声明一个含有dev环境判断的方法，在判断中包含一个标识字符串（上例中是^_^），然后运行时（通过DevTools）检查fn.toString()源码，如果含有该标识字符串就说明DCE失败（无用代码没在...通过Babel插件来做，在测试环境构建时注入检查： // ref: https://github.com/facebook/react/blob/master/scripts/jest/preprocessor.js
Lerna 是 JavaScript/TypeScript 的原始单体库工具。它已经存在多年，被成千上万的项目使用，包括 React 和 Jest。...Lerna 解决了 JavaScript/TypeScript 单体库的两个最大问题： 多项目命令运行：Lerna 可以针对任意数量的项目运行命令，并且以最高效、正确的顺序执行，还可以在多台机器上分布执行...Lerna 的优点： 高效执行任务：Lerna 可以以最高效、正确的顺序并行运行任意数量的项目命令，还可以在多台机器上分布执行。...多包发布：无论包是否具有独立的版本，Lerna 都可以轻松地将多个包发布到 npm。 理想的开发体验：使用 Lerna，你可以在同一代码库中开发多个包，共享代码，明确所有权，并获得快速统一的 CI。...Lerna 的使用： 以下是使用 Lerna 的步骤： 初始化项目 Lerna：在项目根目录中运行以下命令： npx lerna init 会创建一个名为 lerna.json 的配置文件。
多模块管理工具，用来帮助维护monorepo P.S.Lerna是Babel自己日用并开源的工具，见Why is Babel a monorepo?...： issue管理混乱，经常有在core repo提module问题的，需要Close this and track that changelog难以整合，需要人工梳理所有变动的仓库，并做整合 core...） monorepo也存在一些问题，但不如上面提到的痛点强烈： repo体积较大，可能带来版本控制的问题（Git不适合管理体积太大的repo） 统一构建工具，对构建工具提出了更高要求，要能构建各种相关module...rollup遇到问题都先去主repo查相关issue，再根据线索找到对应的plugin repo，再查相关issue。...工具： npm install lerna-changelog -g 然后在lerna.json添加对应配置项： "changelog": { "repo": "ayqy/hoho-lerna",
monorepo 是管理项目代码的一个方式，指在一个项目仓库 (repo) 中管理多个模块/包 (package)，不同于常见的每个 package 都建一个 repo。...isDryRun) { // bin("jest") 先获取 node_modules/.bin/jest 的目录，run 的本质就是执行命令行 // 这行代码的意思就相当于在命令终端，项目根目录运行...感想 回答一下开篇的问题，Vue 是如何管理版本号呢？阅读完源码我们会分现，在发版的时候会统一更新所有包的 package.json 的版本号。...我记得特别清楚他反问我，问我 lerna 解决了什么问题，我支支吾吾回答了官网上的介绍，因为我当时对 lerna 的了解仅停留在官网以及它的常用命令，实际上我不知道它解决了什么问题。...通过这次的源码阅读，我可以回答 TL 反问我的那个问题了，lerna 解决的是发包流程中版本号处理，自动生成 CHANGELOG 文件，提交代码，发布包，推送到仓库这几个问题，它把这几个流程封装成命令供用户使用
": "^16.6.3" } PS：由于babel-loader的最新版本是v8，需要babel版本是v7，所以按照官方教程直接安装babel-core（最高版本是v6）运行会失败，这里选择安装的是babel6...npm test即可（在package.json中配置好scripts："test": "jest"）,测试完成后会在storyshots.test.js生成一个stories/index.js对应的DOM...PS：下次运行Jest时，只有DOM结构与上次完全一致测试才会通过，通常会有两种方法来解决这种情况： 找到问题，修复不同； 用新的DOM结构替换旧的。...expect(image).toMatchImageSnapshot(); }); }); 然后在package.json中添加两个scripts命令： "jest:integration...://localhost:9009 jest:integration", 第一次运行npm run test:integration可以生成UI组件渲染的一次快照，再次运行会将新旧快照进行对比，只有完全一致才能测试通过
本文会分享一个我在实际工作中遇到的案例，从最开始的需求分析到项目搭建，以及最后落地的架构的整个过程。最终实现的效果是使用mono-repo实现了跨项目的组件共享。...首先我们需要考虑的一个问题就是，柜员界面和客户界面是做在一个网站里面，还是单独做两个网站？因为两个界面高度相似，所以我们完全可以做在一起，在客户自助界面隐藏掉右上角的用户和设置就行了。...现在很多知名开源项目都是采用的mono-repo的组织方式，比如Babel，React ,Jest, create-react-app, react-router等等。...来安装依赖了，而是像以前一样yarn install就行了，他会自动帮我们提升依赖，这里的yarn install无论在顶层运行还是在任意一个子项目运行效果都是一样的。...其实有了lerna的帮助我们可以直接在顶层运行，这需要用到lerna的这个功能： lerna run [script] 比如我们在顶层运行了lerna run start，这相当于去每个子项目下面都去执行
； issue难以统一追踪，管理，因为其分散在独立的repo里； 每一个package都包含独立的node_modules，而且大部分都包含babel,webpack等开发时依赖，安装耗时冗余并且占用过多空间...lerna-repo/ packages/ package.json lerna.json lerna.json中的packages配置是一个通配符列表，用于匹配包含了package.json...command.bootstrap.ignore：运行lerna bootstrap指令时会忽视该字符串数组中的通配符匹配的文件。...lerna link：将所有相互依赖的包符号链接在一起。 lerna exec：在每个包中执行任意命令。 lerna run：在每个包中运行npm脚本如果该包中存在该脚本。...2.5 共用devDependencies 在开发过程中，很多模块都会依赖babel、eslint等模块，这些大多都是可以共用的。
selenium-ide 开发手册 https://github.com/SeleniumHQ/selenium-ide peru 包管理器，用于在项目中包含其他人的代码 Peru is a tool...工作原理 自动解决packages之间的依赖关系 通过git 检测文件改动，自动发布 根据git 提交记录，自动生成CHANGELOG 全局安装lerna npm install lerna -g 开发程序...bootstrap" .pem 文件:打包 chrome 插件时使用 openssl genrsa -out selenium-ide.pem 2048 "....Linking dependencies... warning " > babel-jest@23.6.0" has unmet peer dependency "babel-core@^6.0.0 |...index.js -s browser-webdriver -o build/webdriver.js Done in 5.11s. yarn run v1.13.0-20181209.2324 $ babel
", "test": "jest" } } 10. 发布后的处理：考虑补丁升级、文档站点同步发布等问题，以便及时修复问题并提供最新的文档。 11....例如，Jest 和 Mocha 可以用于自动化运行 JavaScript 单元测试，Puppeteer 和 Selenium 可以用于自动化运行端到端测试。...向下兼容处理 向下兼容性是指在升级组件库时，保证新版本不会破坏旧版本的功能。例如，如果新版本的一个组件删除了一个属性，而这个属性在旧版本中是必需的，那么这个变化就不是向下兼容的。...babel-plugin-import Babel 插件: 使用如 babel-plugin-import 的 Babel 插件可以在编译时将导入整个库的语句转换为仅导入使用的组件。...否则，可能会导致程序运行出错。 例如，在 CSS in JS 的库中，可能存在这样的代码： import '.
monorepo管理 如果对monorepo和lerna已经比较了解，可以直接移步CreateReactApp架构 Monorepo是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/...不同于常见的每个模块都需要建一个repo。 babel的packages目录下存放了多个包。 monorepo优势 Monorepo最主要的好处是统一的工作流和代码共享。...比如我在看babel-cli的源码时，其中引用了其他库，如果不使用Monorepo管理方式，而是对@babel/core新建一个仓库，则需要打开另外一个仓库。...只需在创建项目时添加--use-pnp参数。...这经常会引起混乱，因为我们只使用babel处理src/中的文件。 为了解决这个问题，我们阻止你从src/导入文件——如果你愿意， 请将这些文件链接到node_modules/中，然后让模块解析开始。
最早是 Babel 自己用来维护自己的 monorepo 并开源出的一个项目，针对使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化，解决多个包互相依赖，且发布需要手动维护多个包的问题。...基本用法 安装 $ npm install --global lerna 创建一个git仓库 $ git init lerna-repo && cd lerna-repo 初始化一个 lerna 仓库...发布 以上包确认没有问题之后，就可以通过执行 lerna publish 进行发布了。 在进行 publish 之前需要首先提交你的代码，否则 lerna 会报错： lerna ERR!...$ lerna bootstrap --hoist 但是这种方式会有一个问题，不同版本号只会保留使用最多的版本，这种配置不太好，当项目中有些功能需要依赖老版本时，就会出现问题，因此这种方式不推荐使用。...由于 yarn 和 lerna 在功能上有较多的重叠，我们采用 yarn 官方推荐的做法: 用 yarn 来处理依赖问题，用 lerna 来处理发布问题。
在将项目改造成 monorepo 后，目录如下所示： ├─packages │ ├─@mvc │ │ ├─cli # 核心插件 │ │ ├─cli-plugin-babel # babel 插件...devDependencies，则需要在后面加上 --dev # 下载第三方依赖也是同样的命令 lerna add @mvc/cli-plugin-babel --scope=@mvc/cli 改造成...使用 monorepo 的优点 如果采用 multirepo 的方式开发，在本地调试时如果需要调用其他插件，则需要先执行 npm i 安装，才能使用。...如果多个插件都进行了修改，执行 lerna publish 时可以同时发布已经修改过的插件，不用每个单独发布。 add 命令 将项目改造成 monorepo-repo 的目的就是为了后续方便做扩展。...build: 'mvc-cli-service build', }, 当运行 npm run serve 时，就会执行命令 mvc-cli-service serve。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
