1.6 用nwb创建组件库

问题

大一些的公司经常会同时开发多个React应用。咨询公司可能会给多个客户公司开发软件。软件公司可能会开发风格一致的一系列软件产品,此时你可能希望这些软件产品都可以引用同一套组件库。

当创建组件项目时,首先需要构建一个目录结构,然后选择一组工具,选择一组语言特性,再使用一组构建工具来将各个组件打包导出成一个方便引用的库。这个过程可能和手动从零开始创建React应用一样枯燥乏味。

解决方案

你可以使用组件库开发工具nwb来创建完整的React应用或是单个React组件。你也可以创建Preact和InfernoJS项目中的组件,但这里我们主要讨论React组件。

要创建新的React组件项目,首先需要全局安装nwb:

然后就可以用nwb命令创建一个新项目:

如果你不想创建单独的组件,而是想创建完整的nwb应用,那么可以用react-app、preact-app或inferno-app替换命令中的react-component,这样就能以给定的框架来创建应用。如果想创建不使用框架的原生JavaScript项目,那么也可以使用vanilla-app。

当运行这个命令时,它会问几个关于你要创建的库的类型的问题,例如,是否要创建ES modules(ECMAScript模块)形式的构建版本:

这个选项允许你创建一个包含ES modules形式的导出语句的版本,Webpack可以用它来确定引入这个组件库的方式。还有一个配置问题,即是否要创建UMD(Universal Module Definition)形式的构建版本:

如果想在网页中以<script>形式引用组件库,那么这种方式是很有用的。对于我们的示例,我们不会创建UMD形式的构建版本。

在回答完配置问题后,nwb会在my-component子目录中创建一个nwb组件项目。这个项目附带了一个简单的包装应用程序,它可以用start命令启动:

Demo应用程序运行在端口3000上,如图1-8所示。

图1-8:一个nwb组件

这个应用在src/index.js中定义了如下组件:

现在,你可以创建能在React项目中使用的任意组件了。当准备发布一个版本时,输入:

构建的组件将位于lib/index.js中,你可以把它部署到线上仓库(如npm),以便在其他项目中使用。

讨论

关于使用nwb创建组件库的更多内容,请参阅用以开发组件库的nwb指南(https://oreil.ly/XHrQa)。

你可以从GitHub网站(https://oreil.ly/P4Xzj)下载本解决方案的源代码。