Nwb 食用方式

[yuxino]

在这之前我并没有尝试过把组件发布到NPM上提供给他人使用的经历。但是最近我想发布一组件到github。我并不想自己配置webpack然后启动项目。因为那似乎有点麻烦而且小题大做了，我只想写专心写我的组件什么配置环境 guna。好在我在开始写我的webpack配置之前。看了下别人写的react组件。我瞥了一眼作者的的package.json我发现作者使用了nwb创建项目。

A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

很好。这就是我想要的东西。于是安装开始使用。

nwb new react-component react-scratch
cd react-scratch/
npm start

为什么叫react-scratch。是因为我最近在写一个叫react-scratch的组件。当然你喜欢叫别的名字可以叫别的。很快项目建好了。改一下package.json的信息。ok改完了，这就是我的项目了。赶紧打个:tada:init project祝贺一下。

虽然说项目建好了。跑的也非常正常。但是如何构建项目。我心里其实没有一点b数。所以我看了官网的教程。还好这个教程不是很长。没有磨掉我的耐心。

为了照顾我这种不会用的用户。官方表示会通过一个LoadingButton组件的例子告诉我怎么从创建测试到发布的一些列操作。这个LoadingButton要实现三个特性。

• 首先第一个是要可以接受loading的prop。这个属性代表了按钮正在做什么。
• 在loading的状态的时候，按钮会被disabled 掉。避免多次提交。
• 按钮默认使用type="button"而不是type="submit"`。这可能会让你有一点点惊讶。

创建项目

把我刚刚创建的项目忘掉吧。我们重新开坑。使用nwb new命令创建一个新的React component 项目。

nwb new react-component react-loading-button

运行这个会问你几个问题。你可以使用-f或者--force跳过 。

问题

这一部分就不翻译了吧。一般来说都看得懂。自己填吧。你可以一直按回车。但是如果你想用UMD方式构建的话，你需要注意最后一个问题。填上你想暴露的全局变量名。

? Which global variable name should the UMD build set? ReactLoadingButton

注意哦: nwb会创建一个开发版的react-loading-button.js和一个生产版的react-loading-button.min.js。UMD构建的文件会放在/umd文件夹里面。

项目结构

在我们愉快的构建完项目后会看见这么一个项目结构。构建后会安装react和react-dom依赖到node_modules里。

react-loading-button/
  .gitignore
  .travis.yml
  CONTRIBUTING.md
  nwb.config.js
  package.json
  README.md
  demo/
    src/
      index.js
  node_modules/
  src/
    index.js
  tests/
    .eslintrc
    index-test.js

demo/: 包含一个React应用程序，您可以使用nwb的dev server来开发您的模块。
node_modules/: emmmm 这个你懂的
nwb.config.js: nwb的配置文件
src/: 组件的源码
tests/: nwb会运行test目录下面的测试文件。这些测试文件名后缀可以是.test,-test.js或者.spec.js。nwb给我们提供了一个最基础的测试例子在这个项目下。

---

cd到项目目录我们可以开始我们的示例组件了:

cd react-loading-button/

npm run

package.json里面配置了好多个我们可以在开发中使用npm run运行的script:

Command	Description
npm start	给demo app启动dev server
npm test	跑测试
npm run test:coverage	跑测试在生成个覆盖率到coverage/目录
npm run test:watch	在每次修改保存的时候都跑测试
npm run build	在发布到npm之前的准备
npm run clean	删除构建的资源

npm run clean

npm run clean具体是删掉哪些资源呢。看了下package.json里面写的script是nwb clean-module && nwb clean-demo。用nwb --help看了一下这两条分别是清空demo/dist和删掉 coverage/, es/, lib/ 和umd/文件夹用的。

运行demo app

项目结构里面包含了一个demo app。demo app在demo/src/index.js文件夹里。

注意: 如果你不需要这个demo app , 你可以删掉这个目录。

运行pm start将会给这个demo app开启dev server。每次您对demo app或组件进行更改(保存)时，都会刷新当前的编译状态。

如果有错误。将会同时展现在控制台和浏览器之中。所以你在开发中不会错过错误信息。

控制台的错误

浏览器上的错误

通过热重起部署组件会获得非常快的反馈(指的是页面上的,不需要刷新什么的)。

If you're into README Driven Development, it also provides a place to play with your component's API before you've built anything, and tinker with it live as you implement.

这一段不是很懂。不太理解这个基于README的开发模式。

让我们开始想象我们的LoadingButton会被怎么样使用吧。

import React, {Component} from 'react'
import {render} from 'react-dom'

import LoadingButton from '../../src'

class Demo extends Component {
  state = {loading: false}

  handleToggleLoading = () => {
    this.setState({loading: !this.state.loading})
  }

  render() {
    return <div>
      <h1>react-loading-button Demo</h1>

      <h2>Static</h2>
      <LoadingButton>Load</LoadingButton>
      <LoadingButton loading>Loading</LoadingButton>

      <h2>Dynamic</h2>
      <LoadingButton loading={this.state.loading}>
        {this.state.loading ? 'Loading' : 'Load'}
      </LoadingButton>
      <button type="button" onClick={this.handleToggleLoading}>
        Toggle Loading
      </button>
    </div>
  }
}

render(<Demo/>, document.querySelector('#demo'))

Once your component is developed, the demo app falls back to its primary purpose of creating a demo you can deploy when publishing your code without having to build and publish separately, as component builds and demo bundles are built from the same source at the same time.

实现。

以下是Loading组件的实现:

import t from 'prop-types'
import React, {Component} from 'react'

class LoadingButton extends Component {
  static propTypes = {
    disabled: t.bool,
    loading: t.bool,
    type: t.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提供了一个默认设置，它可以让源代码库免受建立资源的干扰（这也可能会让潜在的贡献者感到困惑）并使您的代码作为标准Node.js开发设置的一部分使用，通过模块打包器并通过<script>标记直接在浏览器中使用。

准备发布

npm run build将准备发布，创建组件:

• 一个CommonJs会被构建在lib/目录里面
• 一个ES6模块会被构建在es/里(默认会构建无需配置)
• UMD开发版和生产版都会构建在umd/目录里面。

CommonJs构建使用了add-module-exports插件。避免了使用require()的时候还要加个.default。

任何有propTypes声明的组件或者无状态的函数时组件都会被包裹在if (process.env.NODE_ENV !== 'production')环境之中。所以它们会自动从应用程序的生产版本中剥离。

默认情况下，nwb还将在demo / dist /中创建演示React应用程序的生产版本，你随时可以把这个demo部署在你想要放的地方(例如Surge,Github Page的等)

发布到npm

一旦你写完了项目。你就可以用npm publish发布你的应用。就是这么的简单...

好了 看完了。 其他都不是我特别感兴趣的部分了。。 要用到的时候再说吧