介绍
electrode-electrify 是电极公司开发的一个微前端项目集成方案，通过这个方案，我们可以将多个子应用整合到一个主应用中，同时保证子应用之间的隔离性以及良好的运行效率。
虽然这个方案早在 2019 年就发布了，但是在近段时间内，它逐渐被越来越多的开发者使用。那么，在具体使用 electrode-electrify 这个 npm 包时，我们该如何操作呢？
本篇文章将详细地介绍 electrode-electrify 的使用方法，从安装到实际操作，帮助你更好地了解和使用这个 npm 包。
安装
电极公司提供了一个名为 generator-electrode-electrify 的 Yeoman generator，用于生成自定义的 electrode-electrify 项目。在安装之前，需要先安装 Yeoman，如果你没有安装，可以通过以下命令安装：
--- ------- -- --
然后，我们可以使用 Yeoman 安装 generator-electrode-electrify，同时生成我们的自定义项目。在命令行中输入以下命令：
--- ------- -- ----------------------------- -- -------------------
接下来，我们稍微介绍一下怎样创建项目。
创建项目
使用 Yeoman 创建项目是我们最容易的方式，因为 Yeoman 会自动创建项目并填充一些有用的默认信息。
创建项目时，我们需要首先选择项目的类型，即你的“宿主主应用”。选择完成之后，Yeoman 会自动创建一个项目文件，并自动生成一些示例页面。
下面是一个简单的命令行对话示例：
- ---- ---- -- ---- ----------- -- --- ---- -- ------- ----- ---- - ----- ----- --- ---- -- ------ --- --- -------- -------- ---------- - ------ ---- ------- ----- ------
关于其他的选项，我们在后面会继续讲解。现在，我们可以继续进入下一步：配置。
配置
在 electrode-electrify 中，一个应用程序由多个插件构成。每个插件都有一个名为 plugin.json 的配置文件，用于描述该插件所需的信息。
除了一些基本信息外，plugin.json 文件包含了前端路由、 Redux 状态、生命周期挂钩和多个 CSS 和 JavaScript 数据存储的详细信息。
在 generator-electrode-electrify 创建的项目中，包含 host 和 child 这两个插件。其中，host 插件是主宿主应用程序，而 child 插件则是子应用程序。
编辑好 plugin.json 文件后，我们需要在 Grunt 中注册好它们。Grunt 作为一种任务运行器，可以自动地执行以下操作：
- 编译 Less 和编译 CSS。
- 删除 web 资源的临时目录。
- 合并 JavaScript 和 CSS。
- 生成缩略图。
电极公司已经将所有重要的 Grunt 任务设置成 npm 脚本，因此您只需在 package.json 文件中添加项目的命令即可：
-
------- ---------
---------- -
-------- ------ -- -- ---- -- --- -------
-------------- --- ---- -- --- --- -------
------- ------ --------------- -- --- --- ----------
----------- ------- ------------------- -- ----- ------
----------- ----- ---------
------------ ---------- --------------- ---- -------- ------------------------------
------------- ----- ---------
-------- ------ -- --- --- ---------- -- --- --- -------------
-------------- --- -------------- -- --- --- -------
------------- --- ------------- -- --- --- -------
--------- ---- --- ---------- -- ------ ----- ------------------- ---
---------- ---- --------
--
--------------- -
-------------------------------- --------
--
------------------ -
-------------------------------------- ---------
-------- ---------
---------------------------------- ---------
---------------------- ----------
------------------------- ---------
----------- ---------
------------ ---------
------------ ---------
--------- ---------
------ ---------
------------------------ ----------
----------------------------- ---------
------------------------------------ ---------
------------------------- ---------
----------------------- ---------
---------------------------------- ---------
---------------------------- ---------
------------------------------ ---------
------------------------- ---------
-------------------------------- ---------
------------------- ---------
------------------------------- ---------
-------------------------- ---------
----------- ---------
-------- ---------
-------------- ---------
--------------------- ---------
---------------------- ---------
------------------------- ---------
----------------------- ---------
--------------------- ---------
----------------------- ---------
----------------------- ---------
--------------------- ---------
----------------------- ---------
--------------- ----------
------------- ---------
------------------- ----------
-------------------------- ---------
-------------------- ---------
------------------ ---------
--------------------- ---------
----------------- ---------
-------------- ---------
------------ ---------
----------- ----------
---------- ---------
------- ----------
------------------------- ---------
--------- -----------
-------------- ---------
-------- ---------
----------- ---------
------------- ---------
-------------------- ---------
------------ ---------
----------------------------- ---------
------------- ---------
------------- --------
--
---------- -
------- ----------
-
-子应用
在 electrode-electrify 中，一个子应用代表着由若干个 React 组件组成的独立应用程序，有自己的代码和样式表、独立的路由和 Redux 引擎。
在一般的 React 应用中，我们将应用程序分割为若干个组件，但在电极电子中，我们将应用程序分割为若干个独立的子应用。
现在，我们可以创建新的子应用。在命令行输入以下命令：
-- -----------------------
Yeoman 会询问您有关子应用的一些信息，包括它的名称、其路由、其 Redux 引擎和其样式表、脚本和数据。
- ---- ----- --- ---- -- ---- --- ----- ------------ ------------ - ---- -- --- --- ---- --- --- ----- ------------ ------ - ----- --------- -- --- ---- -- --- --- ---- ----- ------------ ---- ----- ----- - ----- ---------
在我们创建子应用后，以下是一些子应用的事项:
- 像主宿主应用一样，子应用由一组插件组成，每个插件都有 plugin.json。
- 每个插件都有自己的 Redux 引擎，需要在代码中引入所有子应用的 Redux 引擎。
- 可以使用插件一区分子应用，该插件包含子应用的与路由引擎有关的JavaScript代码。
添加 Redux 动作
在 plugin.json 中定义 Redux 动作很简单。下面是一个简单的示例：
-
---------- -
----------- -
------- ---------
---------- ----------------
-------------- --- ------ -------------
-
-
-在你的代码中，你可以像这样捕捉这些动作：
------ - ------ - ---- -------------------------------------------- ------------------- -------- ---------------------- -------- - -- ------- -------------- -- -
运行
最后，我将介绍如何运行你的 electrode-electrify 项目。我们可以在 package.json 文件中添加一些内置的 npm 命令，这些命令可以帮助您在开发\生产环境中运行项目。
在命令行中输入以下命令，然后我们就可以愉快地开始开发了：
--- -----
或者，对于调试：
--- --- -----
这些命令将启动 Grunt 任务运行器，然后通过 npm scripts 启动主宿主应用程序。
结论
在本篇文章中，我们介绍了 electrode-electrify 的基本内容，从安装和使用开始，到配置和运行。希望这个教程可以帮助到那些想学习使用这个 npm 包的开发者，也希望能给那些正在寻找微前端方案的开发者一些启发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67909