發佈你的第一個 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