发布你的第一个 React 组件到 npm

前言

平时总会在项目中引用各类社区的 React 组件，也会在本身的项目中封装可重用的组件，可是一直不知道怎么把组件发布到 npm。正好最近项目对 Toast 的需求比较大，搜索后也没发现可用的轻量级组件，因而干脆本身撸一个发到 npm 练手。

准备

• 在编写一个社区组件以前，最重要的一点是要先构思好组件的 API，由于咱们的组件是给别人用的，因此怎么用最方便，最优雅，都是须要提早考虑好的。我相信你们都遇到过搜到一个组件的文档后因为其冗长的篇幅和难用性而放弃使用的，所以这是最最重要的一点，与人方便与己方便。
• 其次，想好组件的名字，一个简单有辨识度的名字也是组件易用性的标准之一。

步骤

这篇文章只记录我在发布时以为关键的步骤，完整的代码能够去个人 github 查看。

1. 两个文件夹
   src 下放组件对应的代码，一般是一个单入口的 index.js 还有其余子组件。
   example 下放使用组件的示例代码，一般会是一个静态的网页，用于展现效果

2. webpack 编译
   组件基于 es6 + jsx 语法，因此编译是在所不免的，因为个人项目最终须要编译部署到 github pages，因此我用了两套 webpack 配置，一套用于本地起 dev server，一套部署上线。下面只贴起本地服务的配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './example/src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    contentBase: './example',
    compress: true,
    clientLogLevel: 'none',
    hot: true,
    port: 3001
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, 'example/index.html')
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  performance: false
};
复制代码

因为个人项目只有 css 和 js，没有图片等其余静态资源，因此只须要简单的两个 loader，其余的按需引用。

3. eslint 代码校验
   代码校验如今已是前端工程化的标配了，不只能及早的发现一些低级错误，也能规范本身的代码风格，显著提高开发体验。下面是个人 eslint 配置文件：

module.exports = {
  // 代码执行环境，如在浏览器端能够不提示 document, window 等全局对象未定义
  env: {
    browser: true,
    es6: true,
    node: true
  },
  plugins: ['react'],
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  // 因为 react 用到了部分不在 es 标准中的语法，所以须要 babel 解析
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  }
};
复制代码

4. babel 编译成待发布模块
   代码写好了以后，测试也没问题，那么如何将写好的模块编译后发布呢？我搜了好多文章有直接用 webpack 打包的也有用 babel cli 编译的，而后翻了下社区流行组件的源码可能是用 babel 直接编译的，因此就参考了一篇文章（参考见文末）开撸。

运行如下命令安装所需模块:

npm install --save-dev babel-cli babel-core babel-preset-env babel-preset-react-app
复制代码

babel 配置文件：

{
  "presets": ["env", "react-app"]
}
复制代码

最后，在 package.json 里加这么一段 npm script:

{
  "scripts": {
    "compile": "NODE_ENV=production babel src --out-dir lib"
  }
}
复制代码

NODE_ENV=production 这段语句是 babel-preset-react-app 要求的，指明 node 的执行环境，方便内部进行优化处理；后面的 babel 命令则是把 src 文件夹下对应的代码编译后输出到同层的 lib 目录下。
如今在命令行输入 npm run compile 就能够看到编译后的代码了，这些代码就是最终咱们发布到 npm 上的组件。

5. 使用 npm link 测试你的组件
   当你的组件编译完成以后，在发布到 npm 上以前，还能够在本地的其余项目中对此组件进行测试。首先在 package.json 里指定组件的入口文件：

{
  "main": "lib/index.js"
}
复制代码

而后运行 npm link，这样你的组件会被关联到本地的全局 node_modules 中去，而后在另外一个项目里运行 npm link light-toast（ light-toast 替换为你的组件名），这样你就能够在本地的项目里 import 你的组件了。

6. Readme
   组件是给本身和别人用的，那么一个简洁且易懂的 readme 是必不可少的，做为他人了解你代码的窗口，切记要写的通俗，一段冗长的说明文档会瞬间下降一我的使用此组件的兴趣。

7. 发布
   首先咱们须要一个 .npmignore 文件来指定哪些文件是不须要发布到 npm 上的，可根据自身须要修改。

example
src
.babelrc
.eslintrc.js
.gitignore
.prettierignore
webpack.config.js
webpack.config.prod.js
复制代码

其次添加一个 LICENSE 文件，至于为啥须要这个了解下前段时间 react 由于协议闹出的不愉快就知道了，不过开源大部分都用 MIT 协议，直接找一份现成的拷过来就好了。

而后，修改下咱们刚刚的 script:

{
  "scripts": {
    "prepublishOnly": "NODE_ENV=production babel src --out-dir lib"
  }
}
复制代码

prepublishOnly 是 npm 提供的一个钩子，在执行 npm publish 以前执行，这里方便咱们每次发布的时候自动编译代码。

最后，修改下 package.json 里的相关信息，好比组件的版本号，关键词，git 仓库等等，最重要的一点，把 react 和 react-dom 这两个依赖移到 peerDependencies 里去，这样不会致使依赖重复解析的问题。

如今，你终于能够发布你的第一个 react 组件了！等等，发布前你还须要先注册一个 npm 帐号，运行 npm adduser 根据提示进行操做，而后运行 npm publish，提示发布成功后你就能够在 npm 仓库里搜到你本身的组件啦~

8. 用 Github Pages 托管 demo
   若是你的项目是一个 UI 组件，那么最好你能够提供一个在线预览的地址，这样他人能够直观的看到运行效果，也会为你的项目加分很多。假设咱们打包后静态 demo 的目录是在 dist 下面，里面包含一个 index.html 模板和一个 index.js 入口，运行 npm install --save-dev gh-pages，这是一个能够将咱们的代码推到 gh-pages 分支的包。而后在 package.json 里添加如下脚本：

{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}
复制代码

运行 npm run deploy 就能够把 demo 发布到 Github Pages 上去了。

总结

本文是我本身第一次发布一个 React 组件的总结，其中也搜索了不少资料，但愿能给你们一些帮助，让你们少走弯路，多多为开源社区作贡献。

Light Toast
顺便也厚脸皮的贴上我本身写的轻量级 Toast 组件的地址，求个 star ~
若是你正在寻找一个小巧、不须要任何附加样式的 Toast 组件，那么这就是对的人。

参考文章：
Lessons Learned From Publishing a React Component to npm
A guide to building a React component with webpack 4, publishing to npm, and deploying the demo to GitHub Pages