![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=1739294151-NXI3do6R6pxi8dfo1aheAeBhAqxbHduK-0-eb64910136a6d954d43e5c242524c076)
然后就可以用nwb命令创建一个新项目:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_02.jpg?sign=1739294151-JUblfh5IvkfTlbWg4gCXc5bfhl6NyUFd-0-c104cadee000a058b6ffc23f5e8d1f78)
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_03.jpg?sign=1739294151-VVmBiHuoStNjpFkHhRhTI3IK6ZOoP15y-0-1a26af6bb106bbdd4ae92d746b22baa7)
如果你不想创建单独的组件,而是想创建完整的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=1739294151-BHItMJ629BkqYRpTcdOhWUMeiZG0UQWH-0-7009d1e4d57998d1b7d1b7bc0c5701de)
这个选项允许你创建一个包含ES modules形式的导出语句的版本,Webpack可以用它来确定引入这个组件库的方式。还有一个配置问题,即是否要创建UMD(Universal Module Definition)形式的构建版本:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_05.jpg?sign=1739294151-9zNpnCEqnXaEjCxOMVcflxjJH0r6CEor-0-e37da346d15c8833425b47b81d4412db)
如果想在网页中以<script>形式引用组件库,那么这种方式是很有用的。对于我们的示例,我们不会创建UMD形式的构建版本。
在回答完配置问题后,nwb会在my-component子目录中创建一个nwb组件项目。这个项目附带了一个简单的包装应用程序,它可以用start命令启动:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_06.jpg?sign=1739294151-HEDpwnTB9e0mxQUvVysdUShTUzV6t2Tj-0-71e781ad64ec9b9e85429ed2f3c337a6)
Demo应用程序运行在端口3000上,如图1-8所示。
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_07.jpg?sign=1739294151-4OwYUxqD1TpSuCzr1E2nDhauoIbfkyIX-0-296ee26a2da46403fcfac0a4dce3f03a)
图1-8:一个nwb组件
这个应用在src/index.js中定义了如下组件:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/34_08.jpg?sign=1739294151-cdkGsqbWAmL3BgH0e65XUf96TeyRwQXr-0-1f43cede9a4d9d1d853cc550bba62db6)
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/35_01.jpg?sign=1739294151-jQCkQoNcCbH6qkcrxBaMwmWpOXybZpVf-0-af086bb34e4681652731078bb8e0fa58)
现在,你可以创建能在React项目中使用的任意组件了。当准备发布一个版本时,输入:
![](https://epubservercos.yuewen.com/2E539C/26886944502812306/epubprivate/OEBPS/Images/35_02.jpg?sign=1739294151-FJwWqF2bJLnh5o72BUNffP7N24QzZdtu-0-0c2e8a41c0745482a1b799c5deb2cfff)
构建的组件将位于lib/index.js中,你可以把它部署到线上仓库(如npm),以便在其他项目中使用。
讨论
关于使用nwb创建组件库的更多内容,请参阅用以开发组件库的nwb指南(https://oreil.ly/XHrQa)。
你可以从GitHub网站(https://oreil.ly/P4Xzj)下载本解决方案的源代码。