溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
npm(Node Package Manager)，一個Node的包管理器，平時我們常用的公共模塊（插件）或者叫做包大多都放在上面，所以接下來要封裝的插件，我們就簡單稱它為npm包，本文從就從這個簡單的例子開始，逐步對它進行封裝-發布-更新-擴展-使用，進而到得一個相對完整的npm包，下面開始。
可以找個地方直接建個文件夾，最好語義化一點，這樣以后也方便管理，我們這里用終端建文件夾：
mkdir toupper-case-project // 這里我們建了一個名為toupper-case-project的文件夾(對命令行還不太熟的小伙伴可以看看我這篇博客命令行不會？看這里)
在項目根目錄下使用一下命令
npm init這時終端會提示你輸入諸如包名，版本號等信息，如下：
cdn.xitu.io/2018/11/5/166e19cf5aaa80ad?w=734&h=271&f=png&s=66944">
當然，你可以一路回車下來，或者你使用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不能注釋
根目錄下新建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.注冊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會看到管理員終端選項，打開這個終端，然后再進行登錄，發布即可。
package.json中將你的包名改成其他的，這樣再發布，應該就沒問題了。發布成功后顯示如下：
隨便找個練手項目試試：
cnpm i toupper-case-project -D安裝完成：
說明我們的包是可以下載安裝的，然后試試功能，我就直接在vue項目中試試了，大家應該看得懂：
然后運行項目：
搞定！那如果我們后期把這個包改了呢，該怎么做？
我們把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()方式來使用，而且還有交互。那下面我們就來試試。
直接使用vue-cli的話會帶上許多我們不需要的模塊，太笨重，所以我們直接擼一個，如果對webpack還不太熟悉的，可以看看我這篇webpack4.x最詳細入門講解
我們來封裝一個可根據傳入的評分數來顯示星級的組件，類似這樣的：
具體代碼請移步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，否則為0
let 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-loader
loader: '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)$/, // 圖片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（別忘了前面的點）文件用于忽略不需要上傳到npm的文件，規則和.gitignore一樣。如果你的項目內有.gitignore但沒有.npmignore，則會使用.gitignore的配置。
.*
*.md
node_modules/
src/README.md說明（不是必須），大家應該都比我6。
此時我們的目錄應該如下：
以上文件都配置好后就可以運行一下命令安裝依賴了：
cnpm install依賴安裝完成后對項目進行打包：
npm run build打包完成后運行npm login登錄后npm publish發布：
發布搞定！，那能不能用呢？我們去試試看。
cnpm i star-evaluation -D運行后顯示如下：
搞定，這是不是比之前那個toupper-case-project插件高端那么一丟丟？
?
那有的小伙伴可能會說了：“我平時看到的插件不是這么用的，很多都是直接Vue.use()后就可以用了，而且插件還有事件的。”
?
那我們再改改？
其實能否使用Vue.use()這個方式來調用組件，取決于是否配置了install方法，我們給Star.vue組件加上看看：
// 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()了，那我們再加上事件交互，就做個點擊組件彈出具體的星級數值吧！
具體修改如下：
<!-- 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>
...依舊老套路，修改版本號-打包-發布，然后我們在練手項目中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給個星哈，這樣我就可以放心的去搬磚了↓-↓
掘金
博客園
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
