什么是 lego-loader？
lego-loader 是一个前端工具，可以帮助我们轻松地将页面拆分成多个 Web 组件，方便复用和管理。这个工具是建立在 webpack 的 loader 插件之上的，支持 React、Vue 等主流前端框架，并且能够生成用于组件库的文档页面。
安装 lego-loader
在使用 lego-loader 之前，你需要确保已经安装了 Node.js 和 npm，安装 npm 依赖：
npm install lego-loader --save-dev
配置 lego-loader
接下来需要在 webpack 配置文件中加入 lego-loader 的配置：
-- -------------------- ---- -------
------- -
------ -
-
----- ------------------
---- -
-
------- --------------
-------- --
-
-
-
-
-test 字段指定了哪些文件需要被 lego-loader 处理，这里以 .lego.js 或 .lego.jsx 结尾的文件为例。
options 字段是一个可选对象，用于指定配置项。比如：
-- -------------------- ---- -------
-
----- ------------------
---- -
-
------- --------------
-------- -
----------- -------------------
------ -----------------
----------- -------
-------- ------
-
-
-
-其中，
components表示 Web 组件的存放路径，这里默认为./src/components。entry表示 webpack 打包的入口文件路径，这里默认为./src/index.js。outputPath表示打包输出文件的存放路径，这里默认为dist。docPath表示文档页面输出的存放路径，这里默认为docs。
使用 lego-loader
假设我们有一个组件库，其中有一个 Button 组件，我们可以通过以下方式来拆分成多个组件：
-- -------------------- ---- -------
-- ---------------------------
------ ----- ---- --------
-------- ------------- -
----- - --------- ------- - - ------
------ -
------- -------------------------------------
-
-
------ ------- --------- -------------------- ---- -------
-- ------------------------------------
------ ----- ---- --------
------ ------ ---- --------------
-------- ---------------------- -
----- - --------- ------- - - ------
-------- ------------------- -
------------------- ----------
-
------ -
------- -----------------------------------------------
-
-
------ ------- ------------------ -------------------- ---- -------
-- ----------------------------------
------ ----- ---- --------
------ ------ ---- --------------
------ --------------- ---- -----------------------
-------- --------------- -
------ -
--
------- ----------- -- - -------------------- ------ --------- ---------- ---------------
-------------------------- ------------------------
---
--
-
------ ------- --------------然后，我们可以使用 import ButtonExample from './components/Button/ButtonExample.lego.js'; 来引入我们刚刚定义的 Button 组件，并将它渲染到页面上。
// index.js
import ButtonExample from './components/Button/ButtonExample.lego.js';
ReactDOM.render(
<ButtonExample />,
document.getElementById('root')
);在控制台输入 npm run build 命令，即可使用 webpack 编译打包项目。打包完成后，在 dist 目录下会生成一个名为 main.js 的文件，将它引入到 index.html 文件中即可。此时你将看到 Button 组件已经被渲染到页面上。
生成文档
一般来说，我们需要为组件库编写文档，方便其他开发者了解如何使用我们的组件。使用 lego-loader，可以非常方便地生成文档页面。
首先，在 components 目录下新建一个名为 index.md 的 Markdown 文件，编写组件库的介绍和使用方式：
-- -------------------- ---- -------
- ------ --
------ ------------------
-- -----
- ---------- ------------- ------------
- --------- ---------- ---------
-- --
-----
------ ----- ---- --------
------ ------ ---- --------------
------ --------------- ---- -----------------------
-------- --------------- -
------ -
--
------- ----------- -- - -------------------- ------ --------- ---------- ---------------
-------------------------- ------------------------
---
--
-
------ ------- --------------使用
// index.js
import ButtonExample from './components/Button/ButtonExample.lego.js';
ReactDOM.render(
<ButtonExample />,
document.getElementById('root')
);接下来，在配置文件中指定文档页面的存放路径，即可生成文档：
-- -------------------- ---- -------
------- -
------ -
-
----- ------------------
---- -
-
------- --------------
-------- -
----------- -------------------
------ -----------------
----------- -------
-------- ------
-
-
-
-
-
--
-------- -
--- --------------------
-接着执行 npm run build 命令，打包完成后在 docs 目录下即可看到生成的文档页面。
总结
使用 lego-loader 可以非常方便地将页面拆分成多个 Web 组件，可以提高项目的复用性和可维护性，同时也方便了文档页面的生成和管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005550f81e8991b448d241f