本文轉載自【微信公眾號：java進階架構師，ID:java_jiagoushi】經微信公眾號授權轉載，如需轉載與原文作者聯繫
1.為什麼需要管理好js代碼
1.1 你有遇到這些情況嗎
其他項目使用自己慢慢豐富的工具類，你是copy過去的？難免需要刪除整個node_modules並重裝依賴庫，你會因為重寫過某些庫的代碼而糾結？其他人協作開發時，你重寫的庫別人拉不到或者需要手動或者跑腳本來同步？你發現你的工具類有某個較大錯誤，而那麼多項目都依賴了？就像你有時看著鏡子裡的自己感慨造物之美的時候，你覺得你開發的工具真的好用，想有人使用並給你讚美的時候，你不知道怎麼讓別人用？1.2 那管理好js代碼的好處至少就有以下
為了代碼復用可以只用一行代碼，獲取即用當你需要用別人的庫且需要重寫一部分代碼的時候散播自己的光輝，假如自己是金子2.那如何管理js代碼呢——發布npm庫
2.1 首先你要有個npm帳號
進入npm官網（https://www.npmjs.com/）
要填寫Name，Email，Username, Password2.2 配置終端
~ npm adduser
Username: ranran_2
Password:
Email: (this IS public) 546910852@qq.com
Logged in as ranran_2 on https://registry.npmjs.org/.
~ npm whoami
ranran_2
npm adduser 使用此命令登錄終端，依次輸入在npm官網註冊的帳號、密碼和郵箱npm whoami 查看當前登錄的用戶npm logout 退出登錄2.3 發布自己的npm庫
以下以一個react-native的工具庫rncommon為例
例子為rn，是因為最後總有一個環境使用我們發布的庫，我們的庫需要使用該開發環境的api來寫，但最後發布庫的時候我們只保留我們自己寫的工具即可。發布流程對於所有js代碼是一致的。
2.3.1 初始化工程,目錄如下
2.3.2 寫將要發布的庫的內容
在根目錄添加目錄common在目錄下新建MyFlatList.js,封裝下常用的列表控制項。index.js,用於導出控制項導入測試完控制項，就可以準備發布了
import MyFlatList from './common'
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content"/>
<SafeAreaView>
<MyFlatList
renderItem={renderItem}
refreshing={false}
data={['a','b']}
/>
</SafeAreaView>
</>
);
};
當前目錄如下
2.3.3 初始化庫發布基本文件
在終端進入
目錄,輸入
npm init
common npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (common) react-native-fastcommon
version: (1.0.0)
description: commonly used widget&util for rn
entry point: (index.js)
test command:
git repository:
keywords: recat-native common util widget
author: ran
license: (ISC)
About to write to /Users/chenweicheng/git/reactnative/rncommon/common/package.json:
{
"name": "react-native-fastcommon",
"version": "1.0.0",
"description": "commonly used widget&util for rn",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"recat-native",
"common",
"util",
"widget"
],
"author": "ran",
"license": "ISC"
}
Is this OK? (yes) yes
命令用於初始化，生成 package.json 文件package name 安裝這個npm庫時的名字，引用模塊，具體可看下文使用version 版本號，初次發布直接回車即可，更新則需使版本號大於上次版本description 庫描述entry point 入口文件，默認,也可以填其他目錄裡的文件名test command 直接回車默認即可git repository: 庫的代碼倉庫位置keywords: 庫關鍵詞author: ran 你的大名license: (ISC) 直接回車默認即可最後一步會預覽整個
package.json
文件，沒問題直接 輸入
yes
即可；如果需要修改上面內容，打開文件直接修改即可。
2.3.4 發布庫
common npm publish
npm notice
npm notice react-native-fastcommon@1.0.0
npm notice === Tarball Contents ===
npm notice 334B package.json
npm notice 87B index.js
npm notice 1.8kB MyFlatList.js
npm notice === Tarball Details ===
npm notice name: react-native-fastcommon
npm notice version: 1.0.0
npm notice package size: 1.0 kB
npm notice unpacked size: 2.3 kB
npm notice shasum: c4dbbd642a7485de2cbdef19ba873759bfec5403
npm notice integrity: sha512-yFgcmcwjbDgDO[...]Ak0SpuWI8yptw==
npm notice total files: 3
+ react-native-fastcommon@1.0.0
2.3.5 自己安裝庫測試使用
回到項目根目錄，使用npm install --save 加你的npm庫名（package.json的name）安裝庫，安裝成功如下：
common cd ..
rncommon npm install --save react-native-fastcommon
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
added 1 package from 1 contributor and audited 951428 packages in 8.888s
found 0 vulnerabilities
引用庫
import MyFlatList from './common' //這個是之前本地文件的引用
改成
import MyFlatList from 'react-native-fastcommon' //這個是通過安裝的引用
測試成功，和引用本地是不是一樣呢至此，你的第一個庫發布成功，萬事開頭難，恭喜你踏出第一步。
3.你可能會遇到的問題
1、
common npm publish
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.5.0/bin/node" "/usr/local/bin/npm" "publish"
npm ERR! node v7.5.0
npm ERR! npm v4.1.2
npm ERR! code ENEEDAUTH
npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using `npm adduser`
npm ERR! Please include the following file with any support request:
npm ERR! /Users/chenweicheng/git/reactnative/MyNpm/android/react-native-ble/npm-debug.log
解決方法：按以上註冊npm帳號和配置終端操作
2、
npm notice react-native-common@1.0.0
npm notice 330B package.json
npm notice name: react-native-common
npm notice shasum: 0cd0e980d78ac30b312a104dd9d5894f7a1617e2
npm notice integrity: sha512-rDaR9EgiiijP+[...]/Kc9Nd/9Pw2XA==
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "react-native-common". Are you logged in as the correct user? : react-native-common
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/chenweicheng/.npm/_logs/2019-11-15T09_46_51_491Z-debug.log
解決方法：使用的庫的名字已被使用（package.json 中name欄位為npm庫唯一），修改package.json的name欄位即可
3、
npm ERR! you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : react-native-fastcommon
npm ERR! /Users/chenweicheng/.npm/_logs/2019-11-15T09_49_45_472Z-debug.log
解決方法：該帳號需要驗證郵箱，打開https://www.npmjs.com/email-edit 登錄後按提示郵箱驗證即可
4、
npm ERR! You cannot publish over the previously published versions: 1.0.0. : react-native-fastcommon
npm ERR! /Users/chenweicheng/.npm/_logs/2019-11-15T10_16_43_432Z-debug.log
解決方法：因為之前已經發布過此模塊的這個版本，修改提高package.json的version欄位
5、
npm WARN adduser Incorrect username or password
npm WARN adduser You can reset your account by visiting:
npm WARN adduser
npm WARN adduser https://npmjs.org/forgot
npm ERR! argv "/usr/local/Cellar/node/7.5.0/bin/node" "/usr/local/bin/npm" "adduser"
npm ERR! code E401
npm ERR! unauthorized Login first: -/user/org.couchdb.user:ranran_2/-rev/undefined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! /Users/chenweicheng/npm-debug.log
解決方法：假如是帳號和密碼錯誤，找回帳號密碼即可。假如確認帳號密碼無誤。則按如下處理：If you have registered on https://www.npmjs.com/ and are sure that your username and password is correct, delete $HOME/.npmrc and try adduser again.This may be caused by a bug recorded here: https://github.com/npm/npm/issues/6545 (來自 http://stackoverflow.com/questions/38634586/npm-adduser-incorrect-username-or-password)
6、若遇到和問題5一樣的情況，但用問題5解決方法無法解決，那有可能是設置鏡像如淘寶鏡像等，解決方法如下：命令行中輸入：npm install -g nrm，安裝nrm模塊。
nrm ls 可以列出現在可以切換的npm倉庫源。我的如下：
* npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
例如nrm use taobao,則是使用taobao鏡像，我們切回默認的npm，nrm use npm即可解決問題了