不會發布npm包？進來看看？

前言

npm(Node Package Manager)，一個Node的包管理器，平時我們常用的公共模塊（插件）或者叫做包大多都放在上面，所以接下來要封裝的插件，我們就簡單稱它為npm包，本文從就從這個簡單的例子開始，逐步對它進行封裝-發布-更新-擴展-使用，進而到得一個相對完整的npm包，下面開始。

一、一個最簡單的npm包

1.1 新建文件夾

可以找個地方直接建個文件夾，最好語義化一點，這樣以后也方便管理，我們這里用終端建文件夾：
mkdir toupper-case-project // 這里我們建了一個名為toupper-case-project的文件夾
(對命令行還不太熟的小伙伴可以看看我這篇博客命令行不會？看這里)

1.2 初始化項目

在項目根目錄下使用一下命令
npm init
這時終端會提示你輸入諸如包名，版本號等信息，如下：

當然，你可以一路回車下來，或者你使用npm init -y就可以生成默認的package.json文件，效果都是一樣的，然后我們得到以下文件，簡單說明一下：

// package.json
{"name": "toupper-case-project",  // 包名稱，默認和你文件夾同名，可改，但是需要去npm官網搜素這個名稱是否已存在，因為包名不能重復"version": "1.0.0",  // 項目默認版本號，可改，如果項目后期更新再發布，則需要修改版本號"description": "",   // 項目描述，選填，可利于SEO "main": "index.js",  // 你的包的主要入口路徑，就是別人安裝了你的包后系統會去這個路徑找你的代碼"scripts": {         // 腳本命令，后面會講到，現在使用默認的就行"test": "echo \"Error: no test specified\" && exit 1"},"author": "",        // 作者，選填"license": "ISC"     // 許可證，默認即可
}

注：以上代碼使用時記得把注釋刪除，json不能注釋

1.3 新建項目文件

根目錄下新建index.js和upper.js兩個文件分別如下：

// upper.js
let toUpper = (a) => {return a.toUpperCase();
};
export default toUpper;

// index.js
import toUpper from './upper.js';
export default toUpper;

此時我們的項目就應該只有三個文件，如下：

upper.js用于項目功能邏輯，index.js用于導出功能模塊，package.json用于配置相關信息，這樣我們就把一個最簡單的npm包寫好了，接下里進入發布。

1.4 發布

1.注冊npm賬號

前往npm官網注冊一個賬號，記好賬戶名、密碼和郵箱（郵箱收到郵件后一定要進行驗證）。
?

2.源切換

這是個坑，估計很多小伙伴都踩過，畢竟國內npm的速度令人感動，所以大家都運行過一條熟悉的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

但是發布時我們一定要把源切換回npm，而不是淘寶源，當然，直接運行下面這個命令即可解決：

npm config set registry=http://registry.npmjs.org

但是老這樣切來切去有點low啊，這時候nrm就派上用場了，nrm是什么？簡單點說nrm就是專門用來管理和快速切換私人配置的registry的一個工具。

cnpm i nrm -g

安裝好后使用nrm ls命令會顯示如下：

*號在哪個地方就說明現在的源是哪個（我現在處在taobao源），也許你剛開始不顯示*號，但不管顯不顯示，直接運行nrm use npm，然后再npm ls，這時候就發現*指在npm源上了，此時就可以進行下一步了。
?

3.登錄

npm login

然后會提示你輸入用戶名、密碼（是密文的，你看不見，直接輸就行）和郵箱，登錄成功后會顯示:

?
4.試著發布npm包

在項目根目錄下運行npm publish即可發布，順利的話就直接成功了，當然也可能會遇到問題：

• 第一個就是權限問題，也許報這樣的錯誤npm ERR! Error: EPERM: operation not permitted，這時候就得使用管路員權限來進行發布了，window + x會看到管理員終端選項，打開這個終端，然后再進行登錄，發布即可。

• 第二個就是名稱問題，就是你的包名在npm上已經存在了，所以在package.json中將你的包名改成其他的，這樣再發布，應該就沒問題了。

發布成功后顯示如下：

1.5 用用我們發布的包

隨便找個練手項目試試：

cnpm i toupper-case-project -D

安裝完成：

說明我們的包是可以下載安裝的，然后試試功能，我就直接在vue項目中試試了，大家應該看得懂：

然后運行項目：

搞定！那如果我們后期把這個包改了呢，該怎么做？

1.6 更新包

我們把upper.js文件改一改：

// upper.js
let toUpper = (a) => {return 'Hello' + a.toUpperCase();
};
export default toUpper;

然后記得把package.json中的版本號也改了，正常來說加1即可，
將"version": "1.0.0"改為"version": "1.0.1"

現在運行npm publish就可以直接把新的包覆蓋上去：

然后我們在練手項目中怎么更新這個包呢？

• 方法一（直接更新）：cnpm update toupper-case-project（有時可能更新不完全）

• 方法二（安裝覆蓋）：cnpm i toupper-case-project -D（這個比較靠譜）

然后運行項目：

完美！這就是一個最簡單的npm包，是不是沒有想象中的那么觸不可及？但說實話，這個包確實挺low，你看別人的包還經過打包啊、測試啊、還能在vue中直接Vue.use()方式來使用，而且還有交互。那下面我們就來試試。

二、基于webpack和vue的npm包

直接使用vue-cli的話會帶上許多我們不需要的模塊，太笨重，所以我們直接擼一個，如果對webpack還不太熟悉的，可以看看我這篇webpack4.x最詳細入門講解

2.1 構建項目（星級評價組件）

我們來封裝一個可根據傳入的評分數來顯示星級的組件，類似這樣的：

具體代碼請移步github，請反手給個 ★ Star ^_~，下面開始：

首先新建一個名為star-evaluation的項目文件夾；
然后根據以下結構建立項目文件：

|——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具體代碼如下，主要就是將傳過來的數值處理后遍歷出不同的class類名，然后添加到span上。

<!-- Star.vue -->
<template><div class="star"><span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span></div>
</template><script>// 星星長度
const LENGTH = 5;
// 星星狀態
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';export default {data () {return {}},props: {score: {type: Number}},computed: {itemClasses () {let result = [];// 如果小數大于或等于0.5則變為0.5，否則為0let score = Math.floor(this.score * 2) / 2;// 全星let integer = Math.floor(score);// 半星let hasHalf = score % 1 !== 0;// 遍歷全星for (let i = 0; i < integer; i++) {result.push(CLS_ON);}// 處理半星if (hasHalf) {result.push(CLS_HALF);}// 補齊，如果星數小于5，則一直循環判斷填入數據，直到滿足條件while (result.length < LENGTH) {result.push(CLS_OFF);}return result;}}
}
</script><style lang="scss" scoped>.star{font-size: 0;.star-item{display: inline-block;width: 10px;height: 10px;margin-right: 3px;background-repeat: no-repeat;background-size: 10px 10px;&:last-child{margin-right: 0;}}/* 三種圖片類型*/.on{background-image: url(./images/star24_on@2x.png);}.half{background-image: url(./images/star24_half@2x.png);}.off{background-image: url(./images/star24_off@2x.png);}}
</style>

// 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中的內容打包到/dist（打包時會自動生成/dist文件夾）中的bundle.js，bundle.js其實就相當于我們的插件。

// 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/',  // 設置公共路徑filename: "bundle.js", // 打包后輸出文件的文件名libraryTarget: 'umd'   // 將你的library暴露為所有的模塊定義下都可運行的方式，它將可在 CommonJS, AMD 環境下運行},module: {rules: [{test: /\.vue$/,   // vue-loaderloader: 'vue-loader'},{test: /\.css$/,           // 正則匹配以.css結尾的文件use: ['style-loader', 'css-loader']},{test: /\.(scss|sass)$/,   // 正則匹配以.scss和.sass結尾的文件use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是這個順序，因為調用loader是從右往左編譯的},{test: /\.(png|jpg|svg|gif)$/,  // 圖片loaderuse: ['url-loader']},{test: /\.js$/,    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,loader: 'babel-loader'}]},plugins: [new VueLoaderPlugin()]
}

.npmignore（別忘了前面的點）文件用于忽略不需要上傳到npm的文件，規則和.gitignore一樣。如果你的項目內有.gitignore但沒有.npmignore，則會使用.gitignore的配置。

.*
*.md
node_modules/
src/

README.md說明（不是必須），大家應該都比我6。

此時我們的目錄應該如下：

2.2 安裝依賴

以上文件都配置好后就可以運行一下命令安裝依賴了：

cnpm install

2.3 打包項目

依賴安裝完成后對項目進行打包：

npm run build

2.4 登錄并發布（確保當前處于npm源）

打包完成后運行npm login登錄后npm publish發布：

發布搞定！，那能不能用呢？我們去試試看。

2.5 試試我們的npm包

1. 先下載：

cnpm i star-evaluation -D

1. 項目中引入使用：

運行后顯示如下：

搞定，這是不是比之前那個toupper-case-project插件高端那么一丟丟？
?
那有的小伙伴可能會說了：“我平時看到的插件不是這么用的，很多都是直接Vue.use()后就可以用了，而且插件還有事件的。”
?
那我們再改改？

三、 升級包

其實能否使用Vue.use()這個方式來調用組件，取決于是否配置了install方法，我們給Star.vue組件加上看看：

3.1 配置install方法

// index.js
import Star from './Star.vue';Star.install = Vue => Vue.component(Star.name, Star);  // 給Star組件配置install方法，注冊該組件 export default Star;

注：這里有個需要注意的地方，就是Star.name是指向我們給Star.vue文件中配置的name屬性，別忘了配置它：

這時已經搞定了Vue.use()了，那我們再加上事件交互，就做個點擊組件彈出具體的星級數值吧！

3.2 添加事件

具體修改如下：

<!-- Star.vue -->
<template><!-- 綁定showNumber方法 --><div class="star" @click="showNumber"><span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span></div>
</template><script>
...
export default {name: 'Star',   // 別忘加上這個屬性...methods: {showNumber() {this.$emit('showNumber', '我是彈出的信息');  // 將自定義方法showNumber暴露出去,且將參數傳出}}
}
</script>
...

3.3 打包-發布-使用

依舊老套路，修改版本號-打包-發布，然后我們在練手項目中cnpm i star-evaluation -D再安裝一次，因為有時npm update star-evaluation方法不太靠譜，更新不完全。

然后我們在練手項目中使用Vue.use()方式和試試事件，在所要使用插件的文件中使用方式如下：

<template><div class="hello"><!-- 子組件所傳出的自定義showNumber方法調用當前showMessage方法 --><Star @showNumber="showMessage" :score="2.6"/></div>
</template><script>import Vue from 'vue'   // 引入Vue
import Star from 'star-evaluation';  // 引入Star插件
Vue.use(Star)  // 使用Star插件// 以上的引入和注冊一般是在main.js中統一完成，這個大家應該都比較熟悉export default {// 因為使用了Vue.use(Star)方式，所以這里不需要使用components: {Star}來注冊插件methods: {// 點擊組件觸發此方法showMessage(mes) {alert(mes);}}
}
</script><style scoped>
</style>

然后我們npm run dev重啟啟用項目，點擊組件顯示如下：

搞定！是不是也沒那么難？

最后

本來只打算簡單的寫下基本步驟的，沒想到寫（啰嗦）了這么長，有寫得不合適的地方請多多指教，如果能對你有所幫助，也麻煩github給個星哈，這樣我就可以放心的去搬磚了↓-↓