背景
前端工程化深受热爱web开发者的推崇，各种库和技术层出不穷。但是，随着项目越来越大，单尺度软件架构不再符合需求。在过去，我们知道如何组织node.js应用程序，但是，对于前端应用程序，这些技能不再适用。为了解决这个问题，monorepo已被广泛采用。
如果您严格遵循该 monorepo 模式并使用多个相互关联的包，则可以保持文本格式一致，并获得一些其他将在接下来的section中详细讨论的优点。
使用monorepo并不容易，因为很难找到一个好的工具来解决个别包共享的问题。在本文中，我们将介绍monorepo-build，一种帮助构建前端monorepo的工具，该工具可以方便地解决用于共享代码和其他资源的每个应用程序包和库的问题。
monorepo-build介绍
monorepo-build 是Yarn的一个插件，与Yarn@berry一起使用时可以自动为您的monorepo构建构建系统，提供了最佳的开发体验。
此插件包括自定义任务管理器插件，该插件可以自动分析monorepo项目的所有子级，查找webpack.config.js文件，并将所有这些文件编译为与monorepo项目相关联的单个包中。这样做，它可以使跨包引用成为可能，并且使使用monorepo包变得更加直观和易于管理。
安装
安装monorepo-build最简单的方法是使用 yarn 包管理器。打开一个终端，并在其中输入以下命令。
yarn set version berry yarn plugin import @yarnpkg/plugin-monorepo-build
现在可以通过运行以下命令来验证monorepo-build已经安装成功：
yarn plugin list
如果已经成功安装，则应该可以看到 @yarnpkg/plugin-monorepo-build在其中列出，如下所示：
@yarnpkg/plugin-monorepo-build@2.2.2
monorepo-build使用指南
在您的monorepo项目的根目录中运行以下命令：
yarn monorepo-build
monorepo-build将自动为您设置任务管理器，并准备处理您的代码共享。现在您可以继续编写代码了，或者查看您每个包的编译输出结果。
在您根据monorepo模式重新组织代码之后，通过某种方式共享代码是至关重要的。如果每个包都有自己的源代码，您可能会发现自己在多个包之间重复编写和复制代码，这可能会导致软件质量下降，重复努力，以及一堆不必要的代码。
下面是一些关于如何使用monorepo-build最佳实践：
最佳实践
配置环境变量
monorepo-build应该在生产环境中使用，因为它会更改资源链接的URL，以匹配URL口令所需的配置。
为了有效地使用这个库，请使用传递一个环境变量，如下所示：
ENV=production yarn monorepo-build
注意依赖关系
对于多个应用程序包和库，确保webpack.config.js文件正确指向所有必需的依赖项。为避免与其他包产生不必要的麻烦，请确保在使用lerna或yarn workspaces做多包工作时正确管理您的依赖关系。
打包时使用externals属性
externals是webpack提供的一个重要属性。它可以防止在代码中引用依赖项时在包中实现它们，从而使构建后的代码更小。如果你定义了extensions属性，可以引入该项的相关库：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-----
--------- -
------ --------
------------ ------------
-----
--
-----
-使用别名优化跨包引用
如果您的monorepo包需要使用另一个monorepo包，最佳做法是使用别名引用，以确保正确的包被引用。这是这个做法的一个示例：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-----
-------- -
------ -
----------------- ------------------------
-----
--
--
-----
--所有Web包都共享相同的core-js版本
如果在单个node_modules目录下运行不同版本的core-js，在将模块引入monorepo 环境时可能会导致问题。为了避免这种情况，请确保在每个monorepo项目中使用的版本相同。
为了解决此问题，请确保在所有package.json文件中添加相同的依赖项如下：
"dependencies": {
"@babel/runtime-corejs3": "^7.15.4", // core-js 3
"core-js": "3.19.3"
}最后的版本应该是要考察你应用中安装的core-js版本的。
“提取出平民”
使用monorepo-build，一个共享代码包可以简单地跨多个应用程序包和库进行分发，并将其引用作为外部依赖项。
这意味着你至少只需要将每个包的CSS预处理器的规则拆分到公共库中。
总结
monorepo-build是一个很好的前端monorepo工具，它可以方便地解决用于共享代码和其他资源的每个应用程序包和库的问题。本文介绍了如何安装、配置和使用monorepo-build，以及一些最佳实践，涵盖了跨包引用、别名、打包、以及 core-js的版本管理，帮助您通过提高效率来构建出更好的应用。
更多关于 monorepo-build 的详细信息请查阅 monorepo-build文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560cd81e8991b448df110