使用nwb构建React组件与库的完整指南

前言

在现代前端开发中，构建可复用的React组件并将其发布为npm包是提高开发效率的重要方式。nwb作为一个强大的React工具链，为开发者提供了从项目初始化到最终发布的完整工作流。本文将详细介绍如何使用nwb开发和发布React组件/库。

环境准备

在开始之前，需要全局安装nwb：

npm install -g nwb

项目创建

初始化项目

使用以下命令创建新的React组件项目：

nwb new react-component react-loading-button

创建过程中会询问一些构建配置问题：

1. 是否创建ES模块构建：默认Yes，会在es/目录生成保留ES模块语法的构建
2. 是否创建UMD构建：选择Yes后需要指定全局变量名，通常使用大驼峰命名如ReactLoadingButton

项目结构

创建的项目包含以下关键目录和文件：

react-loading-button/
  demo/          # 开发演示应用
  src/           # 组件源代码
  tests/         # 测试代码
  nwb.config.js  # 构建配置文件

开发流程

开发服务器

运行npm start启动开发服务器，支持热重载：

npm start

示例组件实现

我们以实现一个LoadingButton组件为例：

import PropTypes from 'prop-types';
import React from 'react';

class LoadingButton extends React.Component {
  static propTypes = {
    disabled: PropTypes.bool,
    loading: PropTypes.bool,
    type: PropTypes.string,
  };
  
  static defaultProps = {
    disabled: false,
    loading: false,
    type: 'button',
  };

  render() {
    let { children, disabled, loading, type, ...props } = this.props;
    if (loading) {
      disabled = true;
    }
    return (
      <button disabled={disabled} type={type} {...props}>
        {children}
      </button>
    );
  }
}

export default LoadingButton;

测试策略

nwb默认配置了Karma+Mocha+Expect的测试环境：

npm test          # 运行测试
npm run test:watch # 开发时持续运行测试

示例测试代码：

import expect from 'expect';
import React from 'react';
import { renderToStaticMarkup as render } from 'react-dom/server';
import LoadingButton from '../src';

describe('LoadingButton', () => {
  it('renders correctly', () => {
    expect(render(<LoadingButton>Test</LoadingButton>))
      .toContain('<button type="button">Test</button>');
  });
  
  it('disables when loading', () => {
    expect(render(<LoadingButton loading>Test</LoadingButton>))
      .toContain('<button disabled="" type="button">Test</button>');
  });
});

代码覆盖率

生成覆盖率报告：

npm run test:coverage

报告会生成在coverage/目录，帮助识别未测试的代码路径。

构建与发布

构建准备

运行构建命令生成生产环境代码：

npm run build

这会生成：

• lib/：CommonJS构建
• es/：ES模块构建
• umd/：UMD构建（如果配置了）

发布到npm

构建完成后即可发布：

npm publish

高级配置

配置文件

nwb.config.js中可以自定义构建配置：

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: {
      global: 'ReactLoadingButton',
      externals: {
        react: 'React'
      }
    }
  }
}

特性开关

创建项目时可使用以下标志：

• --no-demo：不创建演示应用
• --copy-files：复制非JS文件到构建目录
• --keep-proptypes：保留生产环境的propTypes

组件库开发

对于组件库开发，入口文件通常使用重新导出模式：

export { default as Button } from './Button';
export { default as Modal } from './Modal';

nwb支持最新的ECMAScript导出语法，简化组件库的组织结构。

总结

nwb为React组件开发提供了完整的工具链，从项目初始化、开发、测试到构建发布，覆盖了全生命周期。通过合理的配置，可以轻松开发单个组件或复杂的组件库，并发布到npm供他人使用。

本文介绍的LoadingButton示例展示了nwb的核心功能，实际开发中可以根据项目需求灵活调整配置，构建出高质量的React组件库。