前言
当我们使用 Egg.js 开发 Web 应用时，常常需要将不同的模块拆分为多个子应用，比如前后端分离，或将不同模块分开部署等。此时，我们需要一个能够方便地进行子应用挂载的工具。
Egg.js 官方提供的 egg-subapp 插件能够实现子应用的挂载，但是由于其设计过于灵活，使用起来比较复杂。而 egg-mount 插件则是在 egg-subapp 的基础上进行了一定的简化和优化，使得使用更加方便。
本篇文章将介绍 egg-mount 的使用方法，以及如何在 Egg.js 中实现子应用的挂载。
egg-mount 简介
egg-mount 是一个基于 Egg.js 框架的子应用挂载插件，支持将 Egg.js 中的某个路径挂载到指定的域名或路径上。使用 egg-mount 可以方便地实现多个子应用的管理和部署。
egg-mount 使用方法
安装 egg-mount
在 Egg.js 应用中使用 egg-mount 插件，需要先进行安装。我们可以在应用根目录下使用 npm 进行安装：
$ npm i egg-mount --save
安装完成后，在应用的 package.json 中可以看到 egg-mount 的依赖已经被自动添加。
配置 egg-mount
在 Egg.js 应用中使用 egg-mount 插件，需要在应用的配置中启用它。我们可以在应用的 config/plugin.js 文件中进行配置：
exports.mount = {
enable: true,
package: 'egg-mount'
};在配置完成后，重启应用即可激活插件。
使用 egg-mount
egg-mount 的使用非常简单，只需要在应用中使用中间件即可：
-- -------------------- ---- -------
-- -----------------------
----- ----- - ---------------------
-------------- - --------- ---- -- -
-- - ---- -------------
--------------------- --------------------------------
------- ------------------------
------------- -----
-----
-在应用的 middleware 中心注册中间件：
// config/config.default.js
const path = require('path');
exports.middleware = ['errorHandler', 'mount'];
exports.mount = {
'/api': path.join(__dirname, '../app/middleware/mount.js'),
}以上示例中，我们使用 app.use 方法进行子应用的挂载，并且指定了路由为 /api。此时，我们访问 http://localhost:7001/api 即可访问到挂载的子应用，其中 app.resolveMiddleware('proxy') 是解析 Egg.js 内置中间件 proxy 的方法。
注意：上述配置中的 '/api' 和对应的 middleware 中路径需要一致，且不得与其他路由冲突。
实现子应用挂载
上述示例中的子应用挂载是将另外一个 Egg.js 应用挂载到当前应用中，也可以将其他应用（比如一个 Express 的应用）挂载到 Egg.js 中。
挂载 Express 应用
在 Egg.js 应用中使用 express 中间件，需要先安装 express 模块。
在 Egg.js 应用中，我们可以在 config/config.default.js 中进行配置：
-- -------------------- ---- -------
-------------- - ------- -- -
----- ------ - ---
------------ - -
----------- --- -- -
----- ------- - -------------------
----- ------- - ----------
---------------- ----- ---- -- -
------------- ----------- ----
---
------ --------
-
--
------ -------
--在配置完成后，我们可以以类似于下面这种方式访问该子应用：
<iframe src="http://localhost:7001/subapp1"></iframe>
上述示例中，我们使用了 Express 中间件，并定义了一个 subapp1 应用，并将其挂载到 /subapp1 路径下。
挂载 React 应用
如果是一个 React 应用，并且使用了 webpack 打包，一种实现子应用挂载的方式是将 React 应用打包成一个 js 文件，并通过 Egg.js 中间件进行加载。
具体操作如下：
使用 yarn 或者 npm 安装 webpack、webpack-cli、webpack-dev-middleware、webpack-hot-middleware、express 等依赖。
在 React 应用中的 package.json 中添加以下代码：
-- -------------------- ---- -------
-
---------- -
-------- -------- ----- -------- ----------------- ----- -------- --------
-------- -------- -------- ------------------
--
------------------ -
---------- ---------
-------------- ---------
------------------------- ---------
------------------------- ---------
--
--------------- -
-------- -----------
------------ ----------
-
-其中启动命令为 yarn start 或 npm start。
- 配置 webpack.config.js，将 React 应用打包为一个 js 文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
----- --------------
------- -
--------- -----------
----- --------- - --------
----------- ----
--
-------- -
--- -------------------
--------- -------------------
--------- ---------------
---
--
--- 在 Egg.js 应用中使用 express 中间件，加载前述打包出来的子应用 js 文件：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - --- -- - ----- ------- - ------------------- ----- ---- - ---------- -------------------- ----------------------------------- --------------------- ------ ----- --
其中 app1.use('/subapp1', express.static(path.join(__dirname, '../subapp1/dist'))) 是将 /subapp1 路由挂载到子应用的 dist 目录下。
总结
本篇文章介绍了 egg-mount 的使用方法，以及如何在 Egg.js 中实现子应用的挂载。使用 egg-mount 可以方便地进行多个子应用的管理和部署，通过本文的介绍不难看出，在 Egg.js 应用中使用 egg-mount 插件非常简单，既可以将另外一个 Egg.js 应用挂载到当前应用中，也可以将其他应用（比如一个 Express 应用或 React 应用）挂载到 Egg.js 中。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd681e8991b448e6731