![React Cookbook中文版:87个案例带你精通React框架](https://wfqqreader-1252317822.image.myqcloud.com/cover/471/47491471/b_47491471.jpg)
1.6 用nwb创建组件库
问题
大一些的公司经常会同时开发多个React应用。咨询公司可能会给多个客户公司开发软件。软件公司可能会开发风格一致的一系列软件产品,此时你可能希望这些软件产品都可以引用同一套组件库。
当创建组件项目时,首先需要构建一个目录结构,然后选择一组工具,选择一组语言特性,再使用一组构建工具来将各个组件打包导出成一个方便引用的库。这个过程可能和手动从零开始创建React应用一样枯燥乏味。
解决方案
你可以使用组件库开发工具nwb来创建完整的React应用或是单个React组件。你也可以创建Preact和InfernoJS项目中的组件,但这里我们主要讨论React组件。
要创建新的React组件项目,首先需要全局安装nwb:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_01.jpg?sign=1738862782-J1zwhdouGIlkwMcUQ79wSnigFcyLivLE-0-bf34b5716ba44d0dba511af178d9b1dd)
然后就可以用nwb命令创建一个新项目:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_02.jpg?sign=1738862782-5cD0tIsPWIXf1vUlHXi2KES4QCIrz25t-0-dae359a1228be25210cc43eaf14b1371)
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_03.jpg?sign=1738862782-gJXwlanFw9iXLVhg9VVSzu3vLlXbGlOo-0-d696a42fef348d10fa568a2cd9c77511)
如果你不想创建单独的组件,而是想创建完整的nwb应用,那么可以用react-app、preact-app或inferno-app替换命令中的react-component,这样就能以给定的框架来创建应用。如果想创建不使用框架的原生JavaScript项目,那么也可以使用vanilla-app。
当运行这个命令时,它会问几个关于你要创建的库的类型的问题,例如,是否要创建ES modules(ECMAScript模块)形式的构建版本:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_04.jpg?sign=1738862782-rKHZNZvPlUVCaRZKfRw0dMHS8AX9EJDo-0-dcf23b528e852707f561c6b390dd77c4)
这个选项允许你创建一个包含ES modules形式的导出语句的版本,Webpack可以用它来确定引入这个组件库的方式。还有一个配置问题,即是否要创建UMD(Universal Module Definition)形式的构建版本:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_05.jpg?sign=1738862782-N6ZQTLxud2P9sIoz5YqS5qNPnfHQ6VgT-0-7d6966de8eea5ee483c47d60fcba17cd)
如果想在网页中以<script>形式引用组件库,那么这种方式是很有用的。对于我们的示例,我们不会创建UMD形式的构建版本。
在回答完配置问题后,nwb会在my-component子目录中创建一个nwb组件项目。这个项目附带了一个简单的包装应用程序,它可以用start命令启动:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_06.jpg?sign=1738862782-nZvJamW1TyTimRws1bBd0GRypwvdCpqh-0-72ed452aa4fc47b98618d6ac0e154943)
Demo应用程序运行在端口3000上,如图1-8所示。
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_07.jpg?sign=1738862782-DnTCXc4K0vkNkQ721KLOcqIBAUWMZJa3-0-6f283d2b3295aed7e6016f00c43a21f2)
图1-8:一个nwb组件
这个应用在src/index.js中定义了如下组件:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_08.jpg?sign=1738862782-XsiDsCVfYaCYRJisI3P6gNhF07tN6BAc-0-2043f3e69784e7d9b3c10fde8c7f1396)
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/35_01.jpg?sign=1738862782-unvW67kfGCrTg9CvJw3sT7yFjP9y2dSD-0-9880330e88370e44aedc4f53b0d12c82)
现在,你可以创建能在React项目中使用的任意组件了。当准备发布一个版本时,输入:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/35_02.jpg?sign=1738862782-WsgLHTsDakShHMu9IRfrnPdchH05kWmL-0-cf76e06cd4bc74c78b476e7ea45eba7e)
构建的组件将位于lib/index.js中,你可以把它部署到线上仓库(如npm),以便在其他项目中使用。
讨论
关于使用nwb创建组件库的更多内容,请参阅用以开发组件库的nwb指南(https://oreil.ly/XHrQa)。
你可以从GitHub网站(https://oreil.ly/P4Xzj)下载本解决方案的源代码。