發佈 ReactNative 組件到 NPM

原文地址：http://liu-hang.cn/2019/06/25/189-publish-react-native-component-to-npm/

截屏捕捉組件

npm i react-native-screenshotcatch
複製代碼

背景

前一段時間寫的 react-native 截屏監聽功能是直接寫進項目中的，如今打算將其單獨封裝發佈到 NPM 上去，以前也發過一個命令行工具可是沒有寫文記錄一下過程，此次補上

實現

使用 react-native-create-library

react-native-create-library 是一個自定義組件模板工具，比本身去建立省不少麻煩

npm i -g react-native-create-library # 安裝
react-native-create-library --package-identifier com.dreamser.screenshotcatch --platforms android,ios screenshotcatch
mv screenshotcatch react-native-screenshotcatch
複製代碼

更新 build.gradle

react-native-create-library 中的依賴版本過低，須要更新一下

編寫代碼

請見 React Native 實現截圖添加二維碼分享功能

完善 readme

react-native-create-library 已經爲你準備了基礎的模板，具體內容須要本身來添加

上傳 github

初始化本地repo，在github建立遠程repo，鏈接，上傳代碼...在這裏不作贅述

完善 package.json

package.json文件定義了發佈的全部信息，包括：組件名、版本、做者、描述、依賴等等關鍵信息。具體能夠參照 Creating a package.json file

{
  "name": "react-native-screenshotcatch",
  "version": "0.0.1",
  "description": "A ReactNative Tool for catch Screen Shot Event",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "screen-shot",
    "screen-capture",
    "ios",
    "android"
  ],
  "author": {
    "name": "callcter",
    "email": "sharpliuzigu@gmail.com"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com:callcter/react-native-screenshotcatch.git"
  },
  "peerDependencies": {
    "react-native": "^0.41.2"
  }
}
複製代碼

發佈到 NPM

npm adduser # 建立 NPM 帳號
npm login # 若是已經在官網有帳號，能夠直接登陸
npm whoami # 查看登陸狀態
npm publish # 發佈
複製代碼

發佈時可能遇到 publish Failed PUT 403 錯誤，緣由是更改了鏡像源

npm config get registry # 查看當前鏡像源
npm config set registry=http://registry.npmjs.org # 更改回官方鏡像源
npm publish # 從新發布
複製代碼

NPM 更新

npm 提供官方提供了npm version來進行版本控制，其效果跟手動修改package.json裏面的version字段是同樣的，好處在於，能夠在構建過程當中用npm version命令自動修改，並且具備語義化即Semantic versioning

npm version [<newversion> | major | minor | patch | premajor | preminor | 
prepatch | prerelease | from-git]
複製代碼

語義爲：

major：主版本號（大版本）
minor：次版本號（小更新）
patch：補丁號（補丁）
premajor：預備主版本
preminor: 預備次版本
prepatch：預備補丁版本
prerelease：預發佈版本
複製代碼

參考文章

• 開發本身的react-native組件併發布到npm
• frostney/react-native-create-library
• NPM包（模塊）發佈、更新、撤銷發佈