摘要：我發(fā)布了我的第一個組件，一個基于的標(biāo)簽云組件。然后將這個編譯命令寫到里，如下那么以后要編譯下面的代碼，只需要執(zhí)行現(xiàn)在我們已經(jīng)有編譯好的代碼了，接下來就可以發(fā)布到供其他人使用了。

我發(fā)布了我的第一個 npm 組件，一個基于 react 的 3d 標(biāo)簽云組件。在這途中我也是遇到了很多的坑，花在完善整個發(fā)布流程的時間遠(yuǎn)多于寫這個組件本身的時間，所以我記錄下我覺得一個正常的 react 組件的發(fā)布流程

最后記錄這篇文章花的時間比我完成整個組件的時間都多，最終希望能給新手帶來幫助

在整個發(fā)布組件的過程我做了如下幾件事兒：

開發(fā)組件

編寫 Readme

推送到 github，并且把 demo 放到 github page 上

發(fā)布組件到 npm 上

創(chuàng)建項目文件夾并初始化 npm package ，確保你創(chuàng)建的組件名稱沒有在 npm 上被使用過， 這里我們用 react-demo 作為示例

mkdir react-demo
cd react-demo
npm init

npm init 是生成初始的 package.json 的命令，在 npm init 的時候，你可以根據(jù)你自己的需要進行填寫你的組件信息。或者直接使用 npm init -y 采用默認(rèn)的，后面自己再去修改。

首先安裝 react 相關(guān)的包：

npm i react react-dom -D

采用 babel 編譯相關(guān)的依賴：

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D

采用 webpack 做構(gòu)建，webpack-dev-server 作為本地開發(fā)服務(wù)器，所以需要安裝如下依賴：

npm i webpack webpack-cli webpack-dev-server -D

我這里為了簡單演示，只安裝 babel-loader 用來編譯 jsx，其他 loader 安裝自己的需要自己安裝。

npm i babel-loader -D

另外再安裝一個 webpack 插件 html-webpack-plugin ，用來生成 html：

npm i html-webpack-plugin -D

然后再添加上常規(guī)的 start 和 build 腳本，package.json 如下：

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

當(dāng)然，你也可以直接把我這個 package.json 復(fù)制過去，然后 npm install 進行依賴的安裝，也可以一個一個的安裝。

一個最基本的組件只需要編譯 jsx，所以我這里沒有安裝 css 以及處理其他的 loader，這篇文章的重點不是講 webpack 的，所以其他的自行解決，有 webpack 問題可以私聊我。

然后我們再創(chuàng)建如下的目錄結(jié)構(gòu)：

├── example // 示例代碼，在自己測試的時候可以把測試文件放到 src 里
│?? └── src // 示例源代碼
│??     ├── index.html // 示例 html
│??     └── app.js // 添加到 react-dom 的文件
├── package.json 
├── src // 組件源代碼
│?? └── index.js // 組件源代碼文件
├── .babelrc
├── .editorconfig // 不必須的，但是建議有
├── .gitignore // 如果要放到 github 上，這個是需要有的
└── webpack.config.js

下面我們再創(chuàng)建一個最簡單的組件，來進行演示：

/*** src/index.js ***/
import React from "react";
const ReactDemo = () => (
 
這是我的第一個 react npm 組件
);
export default ReactDemo;

接下來添加一個 demo

/*** examples/src/app.js ***/
import React from "react"
import { render } from "react-dom"
import ReactDemo from "../../src"

const App = () => 
render(, document.getElementById("root"))

注意 demo 中的 ReactDemo 是從 ../../src 中導(dǎo)入的

接下來配置非常簡單的 webpack, 在項目根路徑下創(chuàng)建 webpack.config.js 文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./example/src/index.html"),
    filename: "./index.html"
});

module.exports = {
    entry: path.join(__dirname, "./example/src/app.js"),
    output: {
        path: path.join(__dirname, "example/dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /.(js|jsx)$/,
            use: "babel-loader",
            exclude: /node_modules/
        }]
    },
    plugins: [htmlWebpackPlugin],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {
        port: 3001
    }
};

Webpack 的配置文件主要做了如下事情：

使用 example/src/index.js 作為項目入口，處理資源文件的依賴關(guān)系

通過 babel-loader 來編譯處理 js 和 jsx 文件

通過 html-webpack-plugin 自動注入編譯打包好的腳本文件

為 demo 啟動端口為 3001 的服務(wù)

然后再配置一下 babel，咱們的 babel 主要做兩件事，將 jsx 編譯成 es5，然后再加一個通用的 env，所以 .babelrc 配置如下：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

可以看到之前的 package.json ，我這里 babel 安裝的是 7.x，那么 babel-loader 就應(yīng)該是 8.x 才行，然后 babel 7.x 相對于之前的配置是不同的，要用這個配置，版本一定要跟我的相同，不然配置可能會不一樣。

然后現(xiàn)在執(zhí)行 npm start，然后再訪問 localhost:3001 就可以訪問到了。

編寫 README，如果你不知道該如何編寫，我給你提幾點建議，你可以選擇你覺得必要的點來寫：

logo

官方主頁

介紹

安裝

快速開始

功能列表

截圖

todoList

不足之處

FAQ

Change Log（更新日志）

當(dāng)你寫完 README 之后，我們將添加一些來自 shields.io 的時髦徽章，讓人們知道我們又酷又專業(yè)。

想添加什么樣的徽章看自己喜歡吧，種類有很多。

可以點擊這里看我之前寫的 3d 標(biāo)簽云的 README。

現(xiàn)在基本上可以發(fā)布了，但是要是能提供一個在線的 demo 讓別人在用這個組件的時候可以看到效果就更好了。

發(fā)布在線 demo 可以直接用 Github Pages 來幫助我們托管，通過 webpack 構(gòu)建生產(chǎn)環(huán)境版本，然后發(fā)到 Github 上去即可。

首先去 Github 創(chuàng)建一個用來存放你組件代碼的倉庫。

然后把你的項目初始化成 git 項目：

git init

再添加遠(yuǎn)程倉庫，將本地倉庫和遠(yuǎn)程倉庫關(guān)聯(lián)起來。

git remote add origin git@github.com:crazylxr/react-demo.git

接下來我們可以安裝 gh-pages 來幫助我們發(fā)布到 github pages：

npm i gh-pages -D

為了方便記憶，后續(xù)能更快的發(fā)布，這些命令我們可以寫成 npm-scriprt，所以我們增加兩個腳本：

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "deploy": "gh-pages -d examples/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

添加了 deploy 腳本和 publish-demo，以后需要發(fā)布 demo 的時候只需要 npm run publish-demo 即可。

然后我們就可以 build 項目之后再將 expamples/dist 發(fā)布到 gh-pages 分支：

npm run build
npm run deploy

或者直接

npm run publish-demo

注意：這里只會將 expample/src 下的文件發(fā)布到 ph-pages 分支，master 分支依然沒有到 github 上，如果你要把源碼放到 github 的 master 或者其他分支上，還是需要自己 push 的。

這個時候，我們可以通過 crazylxr.github.io/react-demo 訪問到我們寫的 demo。crazylxr 是 github 的 username，react-demo 是倉庫名，注意改成你自己的。

我們現(xiàn)在的源碼是 jsx 的，所以我們需要通過 babel 把 jsx 編譯為正常瀏覽器能訪問的代碼。我們可以通過 babel-cli 來編譯我們代碼，直接編譯 src 目錄，到 lib 文件夾。更多命令見 babel-cli

npx babel src --out-dir lib

執(zhí)行完這個命令，就把生成一個 lib 文件夾，然后里面的 index.js 就是編譯過后的文件，是可以直接發(fā)布到 npm 的文件。

然后將這個編譯命令寫到 script 里，package.json 如下：

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "compile": "npx babel src --out-dir lib",
    "deploy": "gh-pages -d example/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

那么以后要編譯 src 下面的代碼，只需要執(zhí)行：

npm run compile

現(xiàn)在我們已經(jīng)有編譯好的代碼了，接下來就可以發(fā)布到 npm 供其他人使用了。

在發(fā)布以前我們是需要一些準(zhǔn)備：

注冊 npm 賬戶：

在這里](https://www.npmjs.com/) 注冊一個 npm 賬號。

登錄

在終端輸入：

npm adduser

也可以用：

npm login

然后你會得到一個讓你輸入username、password 和 email 的提示，把它們填在相應(yīng)的位置。

關(guān)于 package.json 需要注意的點

package.json 里面的配置信息非常重要，我解釋一下幾個重要的配置。

name: 包名，如果你學(xué)習(xí)的話建議加一個 scoped，就是我上面的 @taoweng/react-demo 而不是 react-demo，因為 npm 包特別的多，很容易重復(fù)。這樣這個包就會是私有的，可以通過 npm publish --access=public 將這個包變?yōu)楣灿械陌?/p>

version: 包的版本，每次發(fā)布包的版本不能和上次一樣。詳細(xì)規(guī)范可見這里

description：包的簡介。

repository：適合寫 Github 地址，建議寫成：:username/:repository。

license：認(rèn)證。不知道該用什么的，就寫MIT 吧。

main：包的入口文件。就是引入這個包的時候去加載的入口文件。

keywords：添加一些關(guān)鍵詞更容易使你的包被搜索到。

更詳細(xì)的 package.json 配置可見官網(wǎng)。

我這里簡單的添加了這些信息：

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "repository": "crazylxr/react-demo",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "compile": "npx babel src --out-dir lib",
    "deploy": "gh-pages -d example/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": ["react", "demo"],
  "author": "taoweng",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

這些配置信息都會在 npm 包的頁面顯示出來的，所以能填還是填一下：

最后我們在項目中添加 .npmignore 文件，跟 .gitignore 的作用一樣，就是在發(fā)布 npm 的時候需要忽略的文件和文件夾：

# .npmignore 
src
examples
.babelrc
.gitignore
webpack.config.js

這個時候我們就可以發(fā)布到 npm 了:

npm publish

如果你是私有包，可以這樣發(fā)布：

npm publish --access=public

以后發(fā)布新版本的時候，只需要更改一下 package.json 里面的 version 版本號，然后執(zhí)行 npm publish 和 npm run publish-demo 就可以同步 npm 和 demo。

不過如果想讓你的組件在社區(qū)里給更多人用，你需要把 README 寫得更好一點，然后添加好自動化測試，不然別人不太敢用。

另外在寫組件之前可以先了解下有沒有類似的組件了，如果有就直接用吧，咱們就站在巨人的肩膀上，把自己寶貴的時間放在創(chuàng)造價值上。

最后整個項目的源代碼見 github

從 0 開始發(fā)布一個 react 組件到 npm

創(chuàng)建并發(fā)布一個小而美的 npm 包，沒你想的那么難！

同時你也可以在這些地方找到這篇文章：

個人網(wǎng)站

github blog

另外有興趣可以關(guān)注我的公眾號：前端桃園