NPM包monorepo-build使用教程

背景

前端工程化深受热爱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 包管理器。打开一个终端,并在其中输入以下命令。

---- --- ------- -----
---- ------ ------ ------------------------------

现在可以通过运行以下命令来验证monorepo-build已经安装成功:

---- ------ ----

如果已经成功安装,则应该可以看到 @yarnpkg/plugin-monorepo-build在其中列出,如下所示:

------------------------------------

monorepo-build使用指南

在您的monorepo项目的根目录中运行以下命令:

---- --------------

monorepo-build将自动为您设置任务管理器,并准备处理您的代码共享。现在您可以继续编写代码了,或者查看您每个包的编译输出结果。

在您根据monorepo模式重新组织代码之后,通过某种方式共享代码是至关重要的。如果每个包都有自己的源代码,您可能会发现自己在多个包之间重复编写和复制代码,这可能会导致软件质量下降,重复努力,以及一堆不必要的代码。

下面是一些关于如何使用monorepo-build最佳实践:

最佳实践

配置环境变量

monorepo-build应该在生产环境中使用,因为它会更改资源链接的URL,以匹配URL口令所需的配置。

为了有效地使用这个库,请使用传递一个环境变量,如下所示:

-------------- ---- --------------

注意依赖关系

对于多个应用程序包和库,确保webpack.config.js文件正确指向所有必需的依赖项。为避免与其他包产生不必要的麻烦,请确保在使用lernayarn workspaces做多包工作时正确管理您的依赖关系。

打包时使用externals属性

externals是webpack提供的一个重要属性。它可以防止在代码中引用依赖项时在包中实现它们,从而使构建后的代码更小。如果你定义了extensions属性,可以引入该项的相关库:

-- -----------------

-------------- - -
  -----
  --------- -
    ------ --------
    ------------ ------------
    -----
  --
  -----
-

使用别名优化跨包引用

如果您的monorepo包需要使用另一个monorepo包,最佳做法是使用别名引用,以确保正确的包被引用。这是这个做法的一个示例:

-- -----------------

-------------- - -
  -----
  -------- -
    ------ -
      ----------------- ------------------------
      -----
    --
  --
  -----
--

所有Web包都共享相同的core-js版本

如果在单个node_modules目录下运行不同版本的core-js,在将模块引入monorepo 环境时可能会导致问题。为了避免这种情况,请确保在每个monorepo项目中使用的版本相同。

为了解决此问题,请确保在所有package.json文件中添加相同的依赖项如下:

    --------------- -
      ------------------------- ---------- -- ------- -
      ---------- --------
    -

最后的版本应该是要考察你应用中安装的core-js版本的。

“提取出平民”

使用monorepo-build,一个共享代码包可以简单地跨多个应用程序包和库进行分发,并将其引用作为外部依赖项。

这意味着你至少只需要将每个包的CSS预处理器的规则拆分到公共库中。

总结

monorepo-build是一个很好的前端monorepo工具,它可以方便地解决用于共享代码和其他资源的每个应用程序包和库的问题。本文介绍了如何安装、配置和使用monorepo-build,以及一些最佳实践,涵盖了跨包引用、别名、打包、以及 core-js的版本管理,帮助您通过提高效率来构建出更好的应用。

更多关于 monorepo-build 的详细信息请查阅 monorepo-build文档

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600560cd81e8991b448df110


猜你喜欢

  • npm 包 dataship-beam 使用教程

    在前端开发中,我们通常需要对数据进行处理和分析,而 npm 包 dataship-beam 则提供了一种便捷的方式来实现这一目标。它是一个基于 Apache Beam 的 JavaScript 数据处...

    3 年前
  • npm 包 erevna-dictionary-locationdata-loader 使用教程

    erevna-dictionary-locationdata-loader 是一个在前端中用来加载地理位置数据的 npm 包,可以帮助开发者轻松地从数据源中获取地理位置数据,并在应用中使用。

    3 年前
  • npm 包 flxc 使用教程

    介绍 flxc 是一款用于前端开发的 npm 包,它提供了一些常用的 CSS 类名称,帮助开发者快速实现基本的页面布局和样式。它支持响应式设计,兼容各种常见的浏览器,使用简单且易于定制。

    3 年前
  • npm 包 flowd 使用教程

    前言 在现代前端开发中,我们经常需要对代码进行类型检查以提高代码的可读性和维护性。JavaScript 虽然是一个弱类型语言,但是还是有很多工具可以帮助我们实现类型检查,比如 TypeScript、F...

    3 年前
  • npm 包 local-motive 使用教程

    简介 local-motive 是一个可以帮助前端开发者在本地启动静态资源服务的 npm 包。它可以快速启动一个本地服务,极大地提高了开发效率。 本文将会深入介绍 local-motive 的使用方法...

    3 年前
  • npm 包 properties-order 使用教程

    在前端开发中,我们使用对象字面量来定义变量、函数、类等。这些对象往往包含多个属性,而这些属性在代码中的顺序可能会影响代码的可读性、可维护性等问题。这时,我们需要使用一个 npm 包来帮助我们规范化属性...

    3 年前
  • npm 包 samim-font 使用教程

    介绍 samim-font 是一款优秀的中文字体。如果你想在前端开发中使用该字体,可以使用 npm 包 samim-font。通过安装该包,你可以轻松在项目中引入 samim-font 字体。

    3 年前
  • npm 包 stylelint-config-extended 使用教程

    在前端开发中,样式表的语法检测和规范对于代码的可维护性和可扩展性具有重要的作用。在使用 CSS 或者 SCSS 编写样式时,常常需要使用一些代码规范化工具,比如 stylelint。

    3 年前
  • npm 包 v-col 使用教程

    在前端开发中,我们经常需要使用栅格系统来实现不同分辨率下页面的布局。而 Bootstrap 是一个比较流行的栅格系统,提供了一套基于栅格的响应式布局方案。但是,如果你不想使用 Bootstrap,而是...

    3 年前
  • npm 包 bulma.styl-pricing-table 使用教程

    前言 在前端开发中,我们经常需要用到各种 UI 库来方便地实现网页的布局和样式。而在开发过程中,我们也会遇到需要使用表格来展示数据的情况。bulma.styl-pricing-table 就是一个非常...

    3 年前
  • npm 包 css3-vh 使用教程

    在前端开发中,不少情况下需要根据视口大小来设置元素的高度或宽度,在过去,我们可能需要使用 JS 来获取视口高度或宽度并设置 CSS,不过 CSS3 新增了一个单位 vh,可以非常方便地设置高度,但是目...

    3 年前
  • npm 包 ht16k33-fourteensegment-display 使用教程

    前言 ht16k33-fourteensegment-display 是一个适用于前端开发的 npm 包库,通过它可以方便快捷地在你的项目中使用 Fourteen Segment Display 显示...

    3 年前
  • npm 包 formcarry-cli 使用教程

    简介 formcarry-cli 是一个简单易用的 npm 包,用于将表单数据发送到 formcarry.com,并接收对应的响应信息。它可用于前端开发中的小型工程中,旨在帮助前端开发人员快速处理表单...

    3 年前
  • npm 包 bxthai-gcan 使用教程

    什么是 bxthai-gcan? bxthai-gcan 是一个用于生成中文大写数字的 Node.js 模块,其实现原理是将数字进行拆分,然后根据其位数进行不同的组合,最终得到中文大写数字。

    3 年前
  • npm 包 shuttle.js 使用教程

    在现代化的 Web 开发中,框架和库的出现极大地提高了开发效率,因为它们为我们做了很多复杂的工作。然而,有时候我们仍希望对特定的功能进行自定义控制,这就需要一些特定的工具来辅助开发。

    3 年前
  • npm 包 ovh-angular-chatbot 使用教程

    在现代Web应用程序开发中,聊天机器人已经成为了一个越来越重要的组件。它可以增强用户对于应用程序的互动性,提高用户满意度。ovh-angular-chatbot是一个非常实用的npm包,它可以让你很容...

    3 年前
  • npm 包 react-pell 使用教程

    什么是 react-pell? react-pell 是一款基于 React 构建的开源富文本编辑器。它使用简单,功能实用,支持多种样式和格式,是前端开发中必备的工具之一。

    3 年前
  • npm 包 @beardfury/apollo-client 使用教程

    简介 @beardfury/apollo-client 是一种强大的 JavaScript 客户端,可轻松连接 Apollo GraphQL 服务器。该客户端使得发送 GraphQL 查询变得更容易,...

    3 年前
  • npm 包 @csberger/react-canvas 使用教程

    简介 @csberger/react-canvas 是一个基于 React 开发的 Canvas 组件库,它提供了一种简便的方法来在 React 应用中使用画布。 该组件库帮助开发者轻松实现各种可视化...

    3 年前
  • npm 包 atbcoinjs-lib 使用教程

    在前端开发中,难免会遇到需要使用 ATBCoin 钱包的情况。在这种情况下,npm 包 atbcoinjs-lib 就成为了我们的首选。 什么是 atbcoinjs-lib? atbcoinjs-li...

    3 年前

相关推荐

    暂无文章