在现代 Web 开发中，使用组件化的思想进行前端开发已经成为了一个趋势。组件化的好处在于可以极大提高代码的可复用性和可维护性，同时也方便团队协作开发。而 Lerna 则是对于多包存储库的管理工具，可以使得我们更好地进行代码管理和代码复用。最近发布的 @jmaxwell/lerna-semantic-component 是一个基于 Lerna 的组件化开发的工具包，可以帮助我们更好的进行前端组件开发。
安装
步骤一：创建和初始化 lerna 仓库
首先我们需要使用 lerna 创建一个新的仓库，在终端输入以下命令来安装 lerna：
npm install -g lerna
然后，在命令行下运行以下命令来初始化一个 lerna 仓库：
lerna init
步骤二：安装 @jmaxwell/lerna-semantic-component
在 lerna 仓库中，使用以下命令来安装 @jmaxwell/lerna-semantic-component：
npm i @jmaxwell/lerna-semantic-component
步骤三：在 lerna 仓库 package.json 中添加运行脚本
在 lerna 仓库的 package.json 文件中添加需要的运行脚本：
"scripts": {
"build": "lerna run build",
"dev": "lerna run dev",
"test": "lerna run test",
"publish": "lerna publish",
"bootstrap": "lerna bootstrap && jmaxwell-lerna-semantic-component"
},使用
开发一个组件
首先我们需要开发一个组件，组件需要满足一个约定的结构：组件目录包含组件源代码、测试代码和文档；组件的源代码必须绑定为 React 组件。
下面以开发一个 Button 组件为例：
-- -------------------- ---- -------
----- --------
-- --------
----- ------
-- ------
---- ------- ------- -------- ------------- -
------ -
------- -----------------------------------------------------
--
-- - --------
---- ------- ------ ---- ----
------------- -------- -- -- -
----- - --------- - - -------------------- ----------------
----------------------- -----------------------------
---- - -------------
---- ------- ----- ---- --------
------ ------ ---- ----
------ ------- -
------ ---------
---------- -------
--
------ ----- ------- - -- -- -
------ ------- ---------------------- ----------------- --------------
--- - ----------------
---- -- ------- ---------------- ---------- -------- --------------- - -------- --------- - -- - ------------Lerna 工具链并不限制您如何组织代码实现您的需求，因此上述代码完全可以进行修改。
使用 @jmaxwell/lerna-semantic-component 生成文档
在组件目录中运行以下命令即可生成文档：
npx jmaxwell-lerna-semantic-component
执行上述命令后，组件目录将会被更新为：
-- -------------------- ---- ------- - --- --------- --- ------------ --- ---------- - --- ------ - - --- --------- - - --- -------- - - --- ---------------- - - --- ------------- - --- -------- --- ---- - --- ---------- - - --- --------- - --- -------- - --- -------- --- -------- --- ---------- --- ------------ --- ---------
此时，文档目录 docs 中已经生成了 Button 组件的文档。当然，这还远远不够，我们还需要将其部署到一个在线平台上，以方便其他人使用。
发布组件
要发布组件，我们需要在 lerna 仓库根目录下运行以下命令：
npm run publish
Lerna 将会自动发布您所有的组件到 npm 上，并推送 git 存储库。
后续
@jmaxwell/lerna-semantic-component 不仅帮助组件开发者快速生成文档，而且还提供了一些命令，能够帮助我们规范化代码管理、优化编写体验等。
在组件开发过程中，可以考虑使用 @jmaxwell/lerna-semantic-component，提高组件的可维护性和可复用性，同时也能够大大提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600d81e8991b448dde09