预备工作

首先初始化一个React项目，也可以直接Fork我之前用React初始化的一个Demo。这个Demo之前也写过一篇文章介绍，目的就是让大家真正理解每一步的由来。从0开始利用Webpack搭建React Demo。
在NPM官网,注册个人账号。
给自己的NPM包取一个名字，并且通过搜索你取的这个名字的方式在NPM官网验证这个名字是否存在，如果存在需要重新换一个独一无二的名字。确定名字之后，将package.json文件的name 换成你确定的名字，例如我作为案例的组件名：react-components-calendar 。

开始开发

根据我Demo里面的目录结构，建议先在components目录开发我们的组件，然后在page目录进行引用。
配置webpack.config.js：
```
  entry: {
    app: ['./src/main.js'],
    component: ['./components/index.js']
  },
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: '[name].js',
    publicPath: "/build/",
    libraryTarget: 'umd',
    library: 'Calendar'
  },
  externals: {
    'react': 'react',
    'react-dom': 'react-dom'
  }
```
在Demo的基础上，主要做了三项改进：
1. 入口entry项新增了component这一项目，用来作为我们开发的组件的入口。
2. 输出output项filename文件名采用[name]获取entry的键名作为文件名。libraryTarget为确定你打包后的文件，模块组织是遵循的什么规范，可选项有：
```
"var" - Export by setting a variable: var Library = xxx (default)
"this" - Export by setting a property of this: this["Library"] = xxx
"commonjs" - Export by setting a property of exports: exports["Library"] = xxx
"commonjs2" - Export by setting module.exports: module.exports = xxx
"amd" - Export to AMD (optionally named - set the name via the library option)
"umd" - Export to AMD, CommonJS2 or as property in root
```
  一般采用通用类型umd。library用来指定你使用require时的模块名。
3. 扩展externals，这项配置不处理的某些以依赖库。比如，我们的组件是基于React的，如果我们的组件也是用在React项目里，那组件依赖的React就不需要进行babel转义了。如果转义，那样打出来的包就会特别大，没必要。不过在测试开发阶段，这项应该注释掉，在打包发布之前加上就可以。
配置package.json：
```
"main": "build/component.js"
```
只需要在main这项定义打包后的组件的位置就OK了。

打包发布

执行yarn build打包后，在build目录会生成app.js文件和component.js文件。但是我们这里只需要component.js文件，因为我没有对webpack.config.js做环境的区分，所以会将entry项的文件都打包出来。现在我们webpack配置比较简单，所以需要手动处理，将app.js删除后再提交。

现在开始发布

#先登录NPM账号：
npm login

#会依次让你输入用户名、密码、和邮箱
Username: simbawu        
Password:
Email: (this IS public) wsbin610@163.com

#登录成功会出现以下提示信息：
Logged in as simbawu on https://registry.npmjs.org/.

#执行发布命令：
npm publish

#发布成功后会出现以下提示信息：
+ react-components-calendar@0.0.7  
#这里react-components-calendar是我的NPM包名，0.0.7是包的版本号

接下来，我们可以在NPM官网，通过搜索包名或者在个人中心看到刚刚发布的包。

NPM

测试验证

安装刚刚发布的包

yarn add react-components-calendar --dev

安装成功后，在之前我们引入开发的组件的地方将引用路径替换为包引用

// import Calendar from '../../../components/index.js'
import Calendar from 'react-components-calendar'

注释webpack.config.js中的externals这项

output: {
    path: path.resolve(__dirname, '../build'),
    filename: '[name].js',
    publicPath: "/build/",
    libraryTarget: 'umd',
    library: 'Calendar'
  },
  // externals: {
  //   'react': 'react',
  //   'react-dom': 'react-dom'
  // },