如何发布一个react组件包到NPM上

2017-08-16

近期由于项目需要，开发了一个react版本的Panel抽屉组件。该组件使用react和es6实现，引入了外部的react组件、css文件和png图片。在本地项目中开发调试通过后，面临将该组件构建发布的问题。我们知道使用npm publish命令可实现发布，但在发布前我们还有一些步骤需要完成。

1、文件结构

2、src - index.jsx

核心代码在src的index.jsx中，assets中是引入的css和图片。index.jsx部分代码如下，使用es6，引入了react、react-dom、react-addons-css-transition-group和一个css文件。

/*
 * ......
 */
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import '../assets/index.css';
//......
class Panel extends Component {
//......
}
module.exports = Panel;

3、lib - index.js

为了能被其他人使用，需要对index.jsx进行es5处理，react处理，css和图片的处理。构建过后生成的js文件存放在lib文件夹中，即index.js。这个是实际被项目使用的文件。

4、index.js

根目录下的index.js是什么呢？在这里引入lib内的index.js，在package.json中设置main的值就是这个index.js。内容如下：

1	module.exports = require('./lib/index.js');

5、package.json

内容如下：

{
  "name": "@bizfe/biz-rc-panel",
  "description": "React UI Plugin",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server",
    "dev": "rimraf lib && babel src --watch --copy-files --source-maps --extensions .es6,.es,.jsx --out-dir lib",
    "compile": "rimraf lib && babel src --copy-files --source-maps --extensions .es6,.es,.jsx --out-dir lib",
    "build": "webpack"
  },
  "main": "index.js",
  "style": "assets/index.css",
  "keywords": [
    "react",
    "react-component",
    "react-panel",
    "panel"
  ],
  "maintainers": [
    {
      "name": "chenzhen",
      "email": "chenzhen202130@sogou-inc.com"
    }
  ],
  "repository": {
    "type": "git",
    "url": ""
  },
  "license": "MIT",
  "dependencies": {
    "react": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-addons-css-transition-group": "15.6.0"
  },
  "devDependencies": {
    "babel-cli": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "rimraf": "^2.5.0",
    "style-loader": "^0.13.0",
    "file-loader": "0.9.0",
    "url-loader": "0.5.7",
    "webpack": "1.12.9",
    "webpack-dev-server": "1.14.0"
  }
}

dependencies内是组件本身需要引入的插件，在index.jsx中有引用。
devDependencies里的则是构建需要引入的插件。babel相关的几个是用来处理es6和react的，css-loader是处理css文件中的url()，style-loader 引入css文件的插件，file-loader主要用来处理图片，url-loader是对file-loader的上层封装，比如webpack中对图片的加载器配置，然后加webpack……
main是入口文件，这里引入的是根目录下的index.js
style是css的入口文件，引入的是assets/index.css
scripts中写入 “build”: “webpack”方法，用于后面构建组件命令

6、webpack.config.js

内容如下：

var path = require('path');
module.exports = {
    entry: path.resolve(__dirname, './src/index.jsx'),
    output: {
        path: path.resolve(__dirname, './lib'),
        library: 'Panel',
        libraryTarget: 'umd',
        filename: 'index.js'
    },
    externals: {
        'react'       : 'umd react',
        'react-dom'   : 'umd react-dom'
    },
    module: {
        loaders: [{
            test:/\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)([\?]?.*)$/,
            loader: 'url?limit=10000&name=image/[name].[md5:hash:hex:7].[ext]'
        }, {
            test: /\.css$/, // Only .css files
            loader: 'style!css' // Run both loaders
        },{
            test: /\.jsx$/,
            loader: 'babel'
        }]
    }
}

由上面代码可知，构建的是src/index.jsx，输入到lib文件夹下index.js文件。需要增加library，内容是组件的类名，这里是Panel。libraryTarget写 ‘umd’。这种配置方法，告诉webpack，输出的时候会采用umd模块化方案。配合externals的内容，能将外部依赖的内容（react和react-dom）不打包编译进lib内的index.js中。这种配置在插件的构建中是十分常见的。在我的这个组件构建中，使用后代码行数是原来的十分之一。module中则对图片、css和jsx做了相关的构建。

7、其他相关

除了上面的文件，还有一些文件需要我们填写。
README.md：需要我们编辑好，引导使用者更好的使用。
.babelrc：用来设置babel转码的规则和插件的基本的格式，内容如下：

1
2
3

{
  "presets": ["react", "es2015", "stage-0"]
}

.gitignore:用于配置git不需要加入版本管理的文件
.npmignore:.用于配置npm不需要加入版本管理的文件，这里我们需要增加不需要提交到npm上的文件。
node_modules：这个是编译自动下载的插件存放处，该文件夹应该写入.gitignore和.npmignore中

8、构建

写完所有内容，使用npm install命令下载引用。然后使用npm run build调用webpack打包编译组件生成lib文件夹和里面的内容。该命令写在了package.json里。如果都木有问题了，使用npm publish命令发布私有包。完成。