不會發布node包?進來看看

NO IMAGE

前言

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

一、一個最簡單的npm包

1.1 新建文件夾

可以找個地方直接建個文件夾,最好語義化一點,這樣以後也方便管理,我們這裡用終端建文件夾:

mkdir toupper-case-project   // 這裡我們建了一個名為toupper-case-project的文件夾

(對命令行還不太熟的小夥伴可以看看我這篇博客命令行不會?看這裡)

1.2 初始化項目

在項目根目錄下使用一下命令

npm init

這時終端會提示你輸入諸如包名,版本號等信息,如下:

不會發布node包?進來看看

當然,你可以一路回車下來,或者你使用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.jsupper.js兩個文件分別如下:

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

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

不會發布node包?進來看看

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命令會顯示如下:

不會發布node包?進來看看

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

3.登錄

npm login

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

不會發布node包?進來看看

 
4.試著發佈npm包

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

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

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

發佈成功後顯示如下:

不會發布node包?進來看看

1.5 用用我們發佈的包

隨便找個練手項目試試:

cnpm i toupper-case-project -D

安裝完成:

不會發布node包?進來看看

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

不會發布node包?進來看看

然後運行項目:

不會發布node包?進來看看

搞定!那如果我們後期把這個包改了呢,該怎麼做?

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就可以直接把新的包覆蓋上去:

不會發布node包?進來看看

然後我們在練手項目中怎麼更新這個包呢?

  • 方法一(直接更新):cnpm update toupper-case-project(有時可能更新不完全)

  • 方法二(安裝覆蓋):cnpm i toupper-case-project -D(這個比較靠譜)

然後運行項目:

不會發布node包?進來看看

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

二、基於webpack和vue的npm包

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

2.1 構建項目(星級評價組件)

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

不會發布node包?進來看看

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

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

|——src
|    |——images
|    |     |——[email protected]
|    |     |——[email protected]
|    |     |——[email protected]
|    |——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/[email protected]);
}
.half{
background-image: url(./images/[email protected]);
}
.off{
background-image: url(./images/[email protected]);
}
}
</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.jsbundle.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。

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

不會發布node包?進來看看

2.2 安裝依賴

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

cnpm install

2.3 打包項目

依賴安裝完成後對項目進行打包:

npm run build

2.4 登錄併發布(確保當前處於npm源)

打包完成後運行npm login登錄後npm publish發佈:

不會發布node包?進來看看

發佈搞定!,那能不能用呢?我們去試試看。

2.5 試試我們的npm包

  1. 先下載:
cnpm i star-evaluation -D

不會發布node包?進來看看

  1. 項目中引入使用:
不會發布node包?進來看看

運行後顯示如下:

不會發布node包?進來看看

搞定,這是不是比之前那個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屬性,別忘了配置它:

不會發布node包?進來看看

這時已經搞定了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重啟啟用項目,點擊組件顯示如下:

不會發布node包?進來看看

搞定!是不是也沒那麼難?

最後

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

不會發布node包?進來看看

相關文章

ES6讀書筆記(一)

[閉包]該如何理解?

你可能遺漏的JS知識點(二)

徹底弄懂JS原型與繼承