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所示。

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

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

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

讨论

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

你可以从GitHub网站（ https://oreil.ly/P4Xzj ）下载本解决方案的源代码。 3oCfL+brYNxIFJtpcMNhWGwxPlYX2o1kKcxA6zui5gcxV7Q+0eFNlSDKwbAZb7fV