經過npm發佈本身的第一個React組件

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

1.npm註冊，github註冊。（這兩個都十分容易，網上的教程不少，在這就不一一敘述了）

2.在github新建個項目

3.git clone下來以後進入到項目目錄 執行npm init

• name:發佈的名稱
• version：版本號
• entry：入口文件

3.執行npm adduser

4.接下來說講具體該怎麼封裝

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

import { SmallButton } from 'smallbutton';

簡單粗糙的效果
項目地址