npm(Node Package Manager)，一個(gè)Node的包管理器，平時(shí)我們常用的公共模塊（插件）或者叫做包大多都放在上面，所以接下來(lái)要封裝的插件，我們就簡(jiǎn)單稱它為npm包，本文從就從這個(gè)簡(jiǎn)單的例子開始，逐步對(duì)它進(jìn)行封裝-發(fā)布-更新-擴(kuò)展-使用，進(jìn)而到得一個(gè)相對(duì)完整的npm包，下面開始。
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的三明網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
可以找個(gè)地方直接建個(gè)文件夾，最好語(yǔ)義化一點(diǎn)，這樣以后也方便管理，我們這里用終端建文件夾：
重慶分公司
重慶分公司
mkdir toupper-case-project // 這里我們建了一個(gè)名為toupper-case-project的文件夾(對(duì)命令行還不太熟的小伙伴可以看看我這篇博客命令行不會(huì)？看這里)
在項(xiàng)目根目錄下使用一下命令
npm init這時(shí)終端會(huì)提示你輸入諸如包名，版本號(hào)等信息，如下：
cdn.xitu.io/2018/11/5/166e19cf5aaa80ad?w=734&h=271&f=png&s=66944">
當(dāng)然，你可以一路回車下來(lái)，或者你使用npm init -y就可以生成默認(rèn)的package.json文件，效果都是一樣的，然后我們得到以下文件，簡(jiǎn)單說明一下：
// package.json
{
"name": "toupper-case-project", // 包名稱，默認(rèn)和你文件夾同名，可改，但是需要去npm官網(wǎng)搜素這個(gè)名稱是否已存在，因?yàn)榘荒苤貜?fù)
"version": "1.0.0", // 項(xiàng)目默認(rèn)版本號(hào)，可改，如果項(xiàng)目后期更新再發(fā)布，則需要修改版本號(hào)
"description": "", // 項(xiàng)目描述，選填，可利于SEO
"main": "index.js", // 你的包的主要入口路徑，就是別人安裝了你的包后系統(tǒng)會(huì)去這個(gè)路徑找你的代碼
"scripts": { // 腳本命令，后面會(huì)講到，現(xiàn)在使用默認(rèn)的就行
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", // 作者，選填
"license": "ISC" // 許可證，默認(rèn)即可
}
注：以上代碼使用時(shí)記得把注釋刪除，json不能注釋
根目錄下新建index.js和upper.js兩個(gè)文件分別如下：
// upper.js
let toUpper = (a) => {
return a.toUpperCase();
};
export default toUpper;// index.js
import toUpper from './upper.js';
export default toUpper;此時(shí)我們的項(xiàng)目就應(yīng)該只有三個(gè)文件，如下：
upper.js用于項(xiàng)目功能邏輯，index.js用于導(dǎo)出功能模塊，package.json用于配置相關(guān)信息，這樣我們就把一個(gè)最簡(jiǎn)單的npm包寫好了，接下里進(jìn)入發(fā)布。
1.注冊(cè)npm賬號(hào)
前往npm官網(wǎng)注冊(cè)一個(gè)賬號(hào)，記好賬戶名、密碼和郵箱（郵箱收到郵件后一定要進(jìn)行驗(yàn)證）。
?
2.源切換
這是個(gè)坑，估計(jì)很多小伙伴都踩過，畢竟國(guó)內(nèi)npm的速度令人感動(dòng)，所以大家都運(yùn)行過一條熟悉的命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org但是發(fā)布時(shí)我們一定要把源切換回npm，而不是淘寶源，當(dāng)然，直接運(yùn)行下面這個(gè)命令即可解決：
npm config set registry=http://registry.npmjs.org但是老這樣切來(lái)切去有點(diǎn)low啊，這時(shí)候nrm就派上用場(chǎng)了，nrm是什么？簡(jiǎn)單點(diǎn)說nrm就是專門用來(lái)管理和快速切換私人配置的registry的一個(gè)工具。
cnpm i nrm -g安裝好后使用nrm ls命令會(huì)顯示如下：
*號(hào)在哪個(gè)地方就說明現(xiàn)在的源是哪個(gè)（我現(xiàn)在處在taobao源），也許你剛開始不顯示號(hào)，但不管顯不顯示，直接運(yùn)行nrm use npm，然后再npm ls，這時(shí)候就發(fā)現(xiàn)`指在npm`源上了，此時(shí)就可以進(jìn)行下一步了。
?
3.登錄
npm login然后會(huì)提示你輸入用戶名、密碼（是密文的，你看不見，直接輸就行）和郵箱，登錄成功后會(huì)顯示:
?
4.試著發(fā)布npm包
在項(xiàng)目根目錄下運(yùn)行npm publish即可發(fā)布，順利的話就直接成功了，當(dāng)然也可能會(huì)遇到問題：
第一個(gè)就是權(quán)限問題，也許報(bào)這樣的錯(cuò)誤npm ERR! Error: EPERM: operation not permitted，這時(shí)候就得使用管路員權(quán)限來(lái)進(jìn)行發(fā)布了，window + x會(huì)看到管理員終端選項(xiàng)，打開這個(gè)終端，然后再進(jìn)行登錄，發(fā)布即可。
package.json中將你的包名改成其他的，這樣再發(fā)布，應(yīng)該就沒問題了。發(fā)布成功后顯示如下：
隨便找個(gè)練手項(xiàng)目試試：
cnpm i toupper-case-project -D安裝完成：
說明我們的包是可以下載安裝的，然后試試功能，我就直接在vue項(xiàng)目中試試了，大家應(yīng)該看得懂：
然后運(yùn)行項(xiàng)目：
搞定！那如果我們后期把這個(gè)包改了呢，該怎么做？
我們把upper.js文件改一改：
// upper.js
let toUpper = (a) => {
return 'Hello' + a.toUpperCase();
};
export default toUpper;然后記得把package.json中的版本號(hào)也改了，正常來(lái)說加1即可，
將"version": "1.0.0"改為"version": "1.0.1"
現(xiàn)在運(yùn)行npm publish就可以直接把新的包覆蓋上去：
然后我們?cè)诰毷猪?xiàng)目中怎么更新這個(gè)包呢？
方法一（直接更新）：cnpm update toupper-case-project（有時(shí)可能更新不完全）
cnpm i toupper-case-project -D（這個(gè)比較靠譜）然后運(yùn)行項(xiàng)目：
完美！這就是一個(gè)最簡(jiǎn)單的npm包，是不是沒有想象中的那么觸不可及？但說實(shí)話，這個(gè)包確實(shí)挺low，你看別人的包還經(jīng)過打包啊、測(cè)試啊、還能在vue中直接Vue.use()方式來(lái)使用，而且還有交互。那下面我們就來(lái)試試。
直接使用vue-cli的話會(huì)帶上許多我們不需要的模塊，太笨重，所以我們直接擼一個(gè)，如果對(duì)webpack還不太熟悉的，可以看看我這篇webpack4.x最詳細(xì)入門講解
我們來(lái)封裝一個(gè)可根據(jù)傳入的評(píng)分?jǐn)?shù)來(lái)顯示星級(jí)的組件，類似這樣的：
具體代碼請(qǐng)移步github，請(qǐng)反手給個(gè) ★ Star ^_~，下面開始：
首先新建一個(gè)名為star-evaluation的項(xiàng)目文件夾；
然后根據(jù)以下結(jié)構(gòu)建立項(xiàng)目文件：
|——src
| |——images
| | |——star24_half@2x.png
| | |——star24_off@2x.png
| | |——star24_on@2x.png
| |——index.js
| |——Star.vue
|——.npmignore // 用于忽略不需要上傳到npm的文件
|——package.json
|——README.md
|——webpack.config.js各文件如下：
Star.vue具體代碼如下，主要就是將傳過來(lái)的數(shù)值處理后遍歷出不同的class類名，然后添加到span上。
// index.js
import Star from './Star.vue';
export default Star;package.json的依賴配置如下：
{
"name": "star-evaluation",
"version": "1.0.0",
"description": "A plugin which use stars number to evaluate",
"main": "dist/bundle.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --open --mode development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Better-Alan/star-evaluation.git"
},
"keywords": ["star", "evaluation"],
"author": "BetterMan",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue": "^2.5.17",
"vue-hot-reload-api": "^2.2.4",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.9",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
}
}
webpack.config.js配置如下，用于將/src中的內(nèi)容打包到/dist（打包時(shí)會(huì)自動(dòng)生成/dist文件夾）中的bundle.js，bundle.js其實(shí)就相當(dāng)于我們的插件。
// webpack.config.js
const path = require('path'); // 路徑處理模塊
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: {
index: path.join(__dirname, "/src/index.js") // 入口
},
output: {
path: path.join( __dirname, "/dist"), // 打包后的文件存放的地方
publicPath: '/dist/', // 設(shè)置公共路徑
filename: "bundle.js", // 打包后輸出文件的文件名
libraryTarget: 'umd' // 將你的library暴露為所有的模塊定義下都可運(yùn)行的方式，它將可在 CommonJS, AMD 環(huán)境下運(yùn)行
},
module: {
rules: [
{
test: /\.vue$/, // vue-loader
loader: 'vue-loader'
},
{
test: /\.css$/, // 正則匹配以.css結(jié)尾的文件
use: ['style-loader', 'css-loader']
},
{
test: /\.(scss|sass)$/, // 正則匹配以.scss和.sass結(jié)尾的文件
use: ['style-loader', 'css-loader', 'sass-loader'] // 需要用的loader，一定是這個(gè)順序，因?yàn)檎{(diào)用loader是從右往左編譯的
},
{
test: /\.(png|jpg|svg|gif)$/, // 圖片loader
use: ['url-loader']
},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}.npmignore（別忘了前面的點(diǎn)）文件用于忽略不需要上傳到npm的文件，規(guī)則和.gitignore一樣。如果你的項(xiàng)目?jī)?nèi)有.gitignore但沒有.npmignore，則會(huì)使用.gitignore的配置。
.*
*.md
node_modules/
src/README.md說明（不是必須），大家應(yīng)該都比我6。
此時(shí)我們的目錄應(yīng)該如下：
以上文件都配置好后就可以運(yùn)行一下命令安裝依賴了：
cnpm install依賴安裝完成后對(duì)項(xiàng)目進(jìn)行打包：
npm run build打包完成后運(yùn)行npm login登錄后npm publish發(fā)布：
發(fā)布搞定！，那能不能用呢？我們?nèi)ピ囋嚳础?/p>
cnpm i star-evaluation -D運(yùn)行后顯示如下：
搞定，這是不是比之前那個(gè)toupper-case-project插件高端那么一丟丟？
?
那有的小伙伴可能會(huì)說了：“我平時(shí)看到的插件不是這么用的，很多都是直接Vue.use()后就可以用了，而且插件還有事件的。”
?
那我們?cè)俑母模?/p>
其實(shí)能否使用Vue.use()這個(gè)方式來(lái)調(diào)用組件，取決于是否配置了install方法，我們給Star.vue組件加上看看：
// index.js
import Star from './Star.vue';
Star.install = Vue => Vue.component(Star.name, Star); // 給Star組件配置install方法，注冊(cè)該組件
export default Star;注：這里有個(gè)需要注意的地方，就是
Star.name是指向我們給Star.vue文件中配置的name屬性，別忘了配置它：
這時(shí)已經(jīng)搞定了Vue.use()了，那我們?cè)偌由鲜录换?，就做個(gè)點(diǎn)擊組件彈出具體的星級(jí)數(shù)值吧！
具體修改如下：
...依舊老套路，修改版本號(hào)-打包-發(fā)布，然后我們?cè)诰毷猪?xiàng)目中cnpm i star-evaluation -D再安裝一次，因?yàn)橛袝r(shí)npm update star-evaluation方法不太靠譜，更新不完全。
然后我們?cè)诰毷猪?xiàng)目中使用Vue.use()方式和試試事件，在所要使用插件的文件中使用方式如下：
然后我們npm run dev重啟啟用項(xiàng)目，點(diǎn)擊組件顯示如下：
搞定！是不是也沒那么難？
本來(lái)只打算簡(jiǎn)單的寫下基本步驟的，沒想到寫（啰嗦）了這么長(zhǎng)，有寫得不合適的地方請(qǐng)多多指教，如果能對(duì)你有所幫助，也麻煩github給個(gè)星哈，這樣我就可以放心的去搬磚了↓-↓
掘金
博客園
