[TOC]
* * * * *
### **一、npm官網注冊**
想要上傳我們的npm包，我們首先要有一個npm賬號。可以去[官網注冊](https://www.npmjs.com)，具體注冊過程不在說明
### **二、編寫一個最簡單的插件（包）**
我們編寫一個方法將手機號中間的四位數用 ` * `表示
**1. 創建一個 `myself-test-package` 文件夾**
```JavaScript
mkdir myself-test-package
```
**2. 在`myself-test-package`文件夾中新建一個 index.js 文件 并隨意寫入方法。這里的index.js 文件是入口文件要和`package.json` 文件中 `main` 字段的配置相同**
```JavaScript
exports.phone = function(phoneNumber){
return phoneNumber.toString().replace(/^(\d{3})(\d{4})(\d{4})/,"$1****$2")
}
```
**3. 在文件夾中使用npm初始化，生成package.json**
```JavaScript
npm init
```
初始化時我們會生成一個`package.json` 文件
```JavaScript
{
"name": "myself-test-package",
"version": "1.1.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/webxiaoma/test.git"
},
"keywords": [
"test-myself-webxiaoma"
],
"author": "webxiaoma",
"license": "ISC",
"bugs": {
"url": "https://github.com/webxiaoma/test/issues"
},
"homepage": "https://github.com/webxiaoma/test#readme"
}
```
需要注意的是包的名稱必須是唯一的，不然上傳不上去。在給包起名字之前可以去npm官網搜索一下是否重名。
如果你的項目也在github倉庫中，可以在package.json中填寫repository地址，這樣可實現自動更新包
### **三、上傳包**
我們執行
```JavaScript
npm adduser
```
之后會讓我們輸入用戶名、密碼和郵箱，這些東西是你在npm官網注冊的賬號信息，填寫完之后我們在執行
```JavaScript
npm publish
```
我們的包就上傳了。
**需要注意**
如果我們使用了淘寶鏡像 cnpm 我們是無法上傳的。解決方法：
**1. 將npm設置成原倉庫，不在使用淘寶鏡像**
```JavaScript
// 查看npm是否設置了淘寶鏡像
npm config get registry
// 設置會原來的npm地址
npm config set registry=http://registry.npmjs.org
```
完成設置之后重新登錄賬戶進行發布，不過這里如果我們在想使用`cnpm` 還用重新設置淘寶鏡像
**2. 也可以使用一些其他輔助工具 例如：[smart-npm](https://github.com/qiu8310/smart-npm/)**
上傳后我們就可以正常的使用npm來下載我們的這個包了。
```JavaScript
npm install --save-dev myself-test-package
```
### **四、持續集成**
一般來說你會看到一些項目README.md里面有一些icon如：
這些icon看起來很牛逼，但也不只是裝逼用的。
>持續集成(Continuous integration)的目的，就是讓產品可以快速迭代，同時還能保持高質量。它的核心措施是，代碼集成到主干之前，必須通過自動化測試。只要有一個測試用例失敗，就不能集成。
每個icon都表示一個功能，這里不多做介紹，有興趣可以看看下列文章：
1. [跟蹤Github項目的持續集成狀態](https://harttle.land/2016/04/30/github-ci.html)
2. [使用travis-ci集成一個vue.js項目](https://yimogit.github.io/2017/07/24/%E4%BD%BF%E7%94%A8travis-ci%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2github%E4%B8%8A%E7%9A%84%E9%A1%B9%E7%9B%AE/)
參考文章：
[將你的組件發布到npm平臺上](https://segmentfault.com/a/1190000012151905)
