(这篇文章以React为例，其他框架类同。)

预备工作

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

开始开发

1. 根据我Demo里面的目录结构，建议先在components目录开发我们的组件，然后在page目录进行引用。

2. 配置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转义了。如果转义，那样打出来的包就会特别大，没必要。不过在测试开发阶段，这项应该注释掉，在打包发布之前加上就可以。

3. 配置package.json：

   "main": "build/component.js"
   

   只需要在main这项定义打包后的组件的位置就OK了。

打包发布

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

2. 现在开始发布

   #先登录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是包的版本号
   

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

   NPM

测试验证

1. 安装刚刚发布的包

   yarn add react-components-calendar --dev
   

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

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

3. 注释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'
     // },
   

4. 启动项目，查看效果。

   yarn start
   

   Calendar Preview

最后，祝贺大功告成！赶紧去发自己的第一个包吧～

附上本项目的源码：react-components-calendar。