寫在前面:接觸react也有四五個月了，越擼越爽。寫了些元件卻難以管理起來，就打算把元件放在npm上，就花了點時間上網找了點資料學習了下怎麼釋出到npm上。下面整理了下。

1.npm註冊，github註冊。（這兩個都十分容易，網上的教程很多，在這就不一一敘述了）2.在github新建個專案3.git clone下來之後進入到專案目錄 執行npm initname:釋出的名稱version：版本號entry：入口檔案3.執行npm adduser4.接下來講講具體該怎麼封裝

a.安裝所依賴在package.json加入

"devDependencies": {"babel-cli": "^6.0.0","babel-core": "^6.14.0","babel-loader": "^6.2.5","babel-plugin-istanbul": "^2.0.1","babel-preset-es2015": "^6.14.0","babel-preset-react": "^6.24.1","react": "^15.6.1","react-dom": "^15.6.1" }

基於react，babel用於將es6轉成es5（因為之前用的roadhog，roadhog 不會對node_modules 下的js進行轉換）

b.專案結構

c.檔案內容SmallButton.js

入口檔案index.js

.babelrc (babel配置)

5.把es6轉為es5在package.json中加入

"build": "babel src --out-dir lib"

執行npm run build將src目錄下的檔案輸出到lib目錄下

6.釋出 npm publish

看到這樣就成功啦

7.專案中引入

在pakeage.json中寫入

"smallbutton": "^1.0.0"

執行npm i

簡單粗糙的效果就出來了

寫在最後：https://github.com/chaelaugh/smallButton --這個文章的demo地址

原文：https://zhuanlan.zhihu.com/p/32646417