在仍然使用Webpack的情况下在Monorepo中进行开发

Warning: Can only detect less than 5000 characters

尽管Webpack是为大型项目而设计的，但它并不是为整个公司的大型项目而设计的。我们的monorepo包含Etsy各个部分的JavaScript代码。即使使用HardSource，CacheLoader和HappyPack之类的插件来加快构建时间或减少其资源占用，让Webpack尝试一次构建所有内容都是愚蠢的。

我们最终承认自己无法立即构建所有内容。如果您今天解决问题的方法几乎无法奏效，那么当问题在几年后成倍增长时，它就不会很有用。下一步很简单，就是将我们的代码库分成逻辑区域，并为每个区域创建一个webpack配置，而不是使用一个大型配置来构建所有内容。分解内容可以使每个构建的大小合理，从而减少构建时间和资源利用率。另外，由于Webpack非常乐意接受单个配置或多个配置，因此生产版本无需进行太多更改

但是，这种方法存在一个问题：如果我们一次只构建一个站点的一部分，那么除非开发人员手动启动和停止Webpack的多个实例，否则我们将无法让开发人员轻松浏览开发中的Etsy.com。 。 Etsy中有很多功能涉及网站的多个部分。对列表的显示方式进行更改可能意味着我们的搜索页面，卖方信息中心以及我们的内部工具也发生了变化。我们需要一个既允许我们仅构建有意义的站点部分，又保持“它确实有效！”的解决方案。我们旧系统的行为。

Kevin（从技术上来说是“ kevin中间件”）是一种表达型中间件，可以为您管理Webpack的多个实例。它的工作是使构建Monorepo的JavaScript更加容易，同时保持较小资源的资源占用。它的灵感既来自于webpack-dev-middleware，也可以替代于它，它是Webpack自己的开发服务器用来在后台管理单个Webpack实例的工具。如果您碰巧正在使用它，那么Kevin可能会感到有点熟悉。

Kevin通过阅读Webpack配置列表并确定每个资产可能负责的所有资产来工作。然后，它侦听对这些资产的请求，确定负责该资产的配置，然后使用该配置启动Webpack实例。它会基于一种简单的频率算法在内存中保留一些实例，并将监视您的源文件，以热切地重建所有更改。当实例数超过配置的限制时，将关闭并清理使用最少的编译器。

Webpack的首次构建通常需要一段时间。就像我之前提到的那样，它必须先进行其需要构建的所有资产，然后才能进行快速的迭代重建。如果开发人员从活动编译器未构建的配置中请求资产，则该请求可能会在新的编译器完成其首次构建之前超时。凯文（Kevin）试图通过提供一些静态代码来弥补此问题，该静态代码会在仍在运行其第一个版本的编译器中请求资产时提供呈现覆盖图。覆盖代码与开发服务器通信，以检查构建状态，并在完成所有操作后自动重新加载页面。

使用Kevin真的很简单。如果您还没有某种开发服务器，那么用Kevin和Express创建服务器可能需要十几行代码。以下是摘自Kevin文档的摘录：

const express = require（＆express＆＃34;）; const Kevin = require（＆kevin-middleware＆＃34;）; //这是Webpack配置的数组。每个配置都必须被命名，以便我们//能够一致地唯一标识每个配置。普通的ol＆＃39; webpack config //应该也可以正常工作。const webpackConfigs = require（＆＃34; path / to / webpack.config.js＆＃34;）; //设置服务器并配置Kevinconst app = express（）; const kevin =新的Kevin（webpackConfigs，{kevinPublicPath =＆＃34; http：// localhost：3000＆＃34;}）; app.use（kevin.getMiddleware（））; //根据需要提供静态文件。如果您生成异步块，这是必需的; // Kevin只知道配置中的入口点，因此必须假设//其他所有事情都由不同的中间件处理。app.use（＆＃34; / ac / webpack / js＆＃34 ;, express.static（webpackConfigs [0] .output.path））; //让ripapp.listen（9275）;

我们还通过Webpack自己的Tapable插件系统访问了Kevin的许多内部组件。在Etsy，我们使用这些挂钩与我们的监视系统集成，并优雅地重新启动对它们的配置有未决更新的活动编译器。这样，我们可以使开发服务器保持最新状态，同时将开发人员的干扰降到最低。

最后，我们能够极大地改善开发经验。重建我们的卖方工具，以前每个请求花了将近一分钟，而现在，当我们启动一个新的编译器时，花费了不到30秒的时间，随后的请求只花了一两秒钟。在开发中浏览Etsy.com仍然需要与工程师的构建系统进行很少的交互。另外，我们现在可以支持Webpack为我们提供的所有其他功能，例如ES6，更好的资产分析甚至是TypeScript。

在这一部分，我应该提到Kevin是官方的开源软件。在Github上查看源代码，然后从npm作为kevin-middleware安装它。如果您对此有任何反馈，我们欢迎在Github上发表问题。我真的希望您能像我们一样多地利用它。

这篇文章是由两部分组成的系列文章的第二篇，这是我们向现代JavaScript构建系统的迁移。第一部分可以在这里找到。

可以在Typere前端应用程序和libs中使用Monorepo吗？