前言
Vue 專案開發程序中，經常用到插件，比如原生插件 vue-router、vuex，還有 element-ui 提供的 notify、message 等等，這些插件讓我們的開發變得更簡單更高效，那么 Vue 插件是怎么開發的呢？如何自己開發一個 Vue 插件然后打包發布到npm？
本文涉及技術點：
- Vue 插件的本質
Vue.extend()全域方法- 如何手動掛載
Vue實體 Vue.use()的原理- 如何打包成
umd格式 - 發布前如何測驗
npm包
一、定義
什么是Vue插件，它和Vue組件有什么區別？來看一下官網的解釋：
“插件通常用來為 Vue 添加全域功能，”
“組件是可復用的 Vue 實體，且帶有一個名字，”
—— Vue.js 官網
Emmmm，似乎好像有種朦朧美，，，
我來嘗試解釋一下，其實， Vue 插件 和 Vue組件 只是在 Vue.js 中包裝的兩個概念而已，不管是插件還是組件，最終目的都是為了實作邏輯復用，它們的本質都是對代碼邏輯的封裝，只是封裝方式不同而已，在必要時，組件也可以封裝成插件，插件也可以改寫成組件，就看實際哪種封裝更方便使用了，
除此之外，插件是全域的，組件可以全域注冊也可以區域注冊，
我們今天只聚焦 Vue 插件，
插件一般有下面幾種：
- 添加全域方法或者屬性，如: vue-custom-element
- 添加全域資源：指令/過濾器/過渡等，如 vue-touch
- 通過全域混入來添加一些組件選項，如 vue-router
- 添加 Vue 實體方法，通過把它們添加到 Vue.prototype 上實作，
- 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router
—— Vue.js 官網
二、插件的使用
插件需要通過 Vue.use() 方法注冊到全域，并且需要在呼叫 new Vue() 啟動應用之前完成，之后在其他 Vue 實體里面就可以通過 this.$xxx 來呼叫插件中提供的 API 了，
下面以實作一個簡易的提示框插件 toast 為例，給大家介紹怎么一步一步開發和發布一個 Vue 插件，
希望達到的效果：
在 main.js 中 use：
// src/main.js
import Vue from 'vue'
import toast from '@champyin/toast'
Vue.use(toast)
在 App.vue 的生命周期 mounted 方法里呼叫 this.$toast()：
// src/App.vue
<template>
<div>
<button @click='handleClick'>Toast</button>
</div>
</template>
<script>
export default {
name: 'demo',
methods: {
handleClick() {
this.$toast({
type: 'success',
msg: '成功',
duration: 3
})
}
}
}
</script>
運行后在頁面上點擊按鈕，彈出 成功 的提示，然后3秒后消失，
在線體驗地址：http://champyin.com/toast/
三、插件開發
1. 撰寫 toast 的本體，
在 Vue 專案（你可以使用 Vue-cli 快速生成一個 Vue 專案，也可以自己用 webpack 搭建一個）的 src 目錄下創建 components/Toast/index.vue 檔案，
// src/components/Toast/index.vue
<template>
<transition name='fade'>
<div class='uco-toast' v-if='isShow'>
<span :class='iconStyle'></span>
<span>{{msg}}</span>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
isShow: false,
type: 'success',
msg: '成功',
duration: 1,
};
},
computed: {
iconStyle() {
return `tfont icon-${this.type} toast-icon`;
},
},
mounted() {
this.isShow = true;
setTimeout(() => {
this.isShow = false;
}, this.duration * 1000);
},
};
</script>
<style lang='less' scoped>
// 樣式略
</style>
現在 toast 本體完成了，但是它里面的資料目前沒法改變，因為我沒有給它定義 props 屬性，這不是 bug，而是，插件并不是通過 pops 來傳值的，
2. 手動掛載 toast 實體的 dom
為了給插件傳值，可以利用基礎 Vue 構造器 Vue.extend() 創建一個“子類”，這個子類相當于一個繼承了 Vue 的 Toast 構造器，然后在 new 這個建構式的時候，給 Toast 的 data 屬性傳值，然后手動呼叫這個實體的 $mount() 方法手動掛載，最后使用原生JS的 appendChild 將真實 DOM （通過實體上的 $el 屬性獲取）添加到 body 上，
在 src 目錄下新建 components/Toast/index.js 檔案：
// src/components/Toast/index.js
import Vue from 'vue';
import Toast from './index.vue';
// 使用 Vue.extend() 創建 Toast 的構造器
const ToastConstructor = Vue.extend(Toast);
const toast = function(options = {}) {
// 創建 Toast 實體，通過建構式傳參，
// 并呼叫 Vue 實體上的 $mount() 手動掛載
const toastInstance = new ToastConstructor({
data: options
}).$mount();
// 手動把真實 dom 掛到 html 的 body 上
document.body.appendChild(toastInstance.$el);
return toastInstance;
};
// 匯出包裝好的 toast 方法
export default toast;
3. 暴露 install 方法給 Vue.use() 使用，
為了支持 Vue.use()，Vue.js 的插件應該暴露一個 install 方法，這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件，
—— Vue.js 官網
通過 Vue.js 原始碼也可以看出，Vue.use() 方法所做的事情就是呼叫插件或者組件的 install 方法，然后把全域 Vue 傳進去供插件和組件使用，
// https://github.com/vuejs/vue/blob/dev/src/core/global-api/use.js
/* @flow */
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
在 src 目錄下新建 components/index.js 檔案，定義一個 install 方法，在里面將 toast 實體放到 Vue.prototype 上作為 Vue 實體的方法暴露到全域，
// src/components/index.js
import toast from './Toast/index';
import '../icon/iconfont.css';
// 準備好 install 方法 給 Vue.use() 使用
const install = function (Vue) {
if (install.installed) return;
install.installed = true;
// 將包裝好的 toast 掛到Vue的原型上，作為 Vue 實體上的方法
Vue.prototype.$toast = toast;
}
// 默認匯出 install
export default {
install,
};
現在插件就開發完成了，可以在當前專案中本地參考這個插件了，
//在 main.js 中
import toast from src/components/index.js;
Vue.use(toast);
//在 App.vue 中
handleClick(){
this.$toast();
}
四、發布到npm
為了方便其他人也可以使用到這個插件，我們可以把它發布到 npm 上去，發布的步驟很簡單，但是發布之前，需要有一些小配置和一些注意的地方，
1. 打包配置
首先我們要把它打包成可以給瀏覽器決議的 UMD 格式的的模塊，并且去掉對 Vue.js 的打包，這樣別人在 Vue 專案中使用這個插件的時候就不會有兩份 Vue 或者出現 Vue 版本沖突的問題，以保證可以更好被獨立參考，
如果你是用 Vue-cli 生成的專案，那只需要在你的 npm 腳本中配置一下庫的打包命令：
// package.json
"build:lib": "vue-cli-service build --target lib --name toast --dest lib src/components/index.js"
命令說明：
--target：構建的目標
targetType 有三個選項：lib | wc | wc-async
lib：庫
wc：web component
wc-async：異步的 web component
--name：庫或組件的名字
當入口為單一檔案時，name為庫或組件的檔案名
當入口為global運算式時，name為每個庫或組件檔案名字的前綴
[entry]：打包入口
可以是.vue檔案，也可以是.js檔案
當注冊多個web component時，入口可以是一個global運算式，如 components/*.vue
--dest：輸出目錄
默認為dist目錄，也可以修改為自定義的目錄
然后運行 npm run build:lib，即可在 lib 目錄下生成如下檔案：
toast.umd.js 一個直接給瀏覽器或者AMD loader 使用的 UMD 包
toast.umd.min.js 一個壓縮版 UMD 構建版本
toast.common.js 一個給打包器用的CommonJS包
如果你是用 webpack 搭建的 Vue 專案，那就需要在 webpck 中配置一下 output.libraryTarget 等屬性：
// build/webpack.lib.conf.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/components/index.js',
output: {
path: path.resolve(__dirname, '../lib'),
filename: 'toast.js',
library: 'toast',
libraryTarget: 'umd',
libraryExport: 'default',
umdNamedDefine: true,
globalObject: 'typeof self !== \'undefined\' ? self : this',
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue',
},
},
plugins: [
new CleanWebpackPlugin(),
],
};
然后運行 npm run build:lib，即可在 lib 目錄下生成如下檔案：
toast.js 直接給瀏覽器或者AMD loader 使用的 UMD 包
2. 發布前的測驗
發布前，我們需要配置一下 package.json 里的 name 和 main 欄位：
name 的值是最終包的名字，install 和 import 的就是這個名字（請確保全網唯一），
main 的值是包的入口檔案路徑（相對當前檔案的路徑），一定要填寫正確，否則包無法被參考，
"name": "@champyin/toast",
"main": "lib/toast.js",
為了確保包的配置沒有問題，我們可以利用 npm link 命令在本地測驗一下包的使用情況，使用npm link測驗包的使用估計很多人都會，就不贅述了，如果有需要可以看我的另一篇中文章npm link詳解，
這個時候，我們其實就可以發布了，但是為了防止把不必要的檔案發布出去（比如測驗用例和demo）浪費人家下載的流量，我們最好是建一個 .npmigore 檔案，語法跟 .gitignore 相同，
3. 發布
發布的方法很簡單(不過首先你要有個 npm 賬號)，在 package.json 所在的目錄下執行這兩句就可以了：
npm add user
npm publish
關于更詳細的發布教程，我在另一篇文章有專門細說：如何發布一個npm模塊，
4. 安裝測驗
其實到了這一步一99.99%是不會出錯了，安裝一遍只是為了那 0.01% 的萬一，
在另一個 Vue 專案里（注意不能在開發toast的專案里哈），從 npm 安裝自己剛才發布的包：
npm i -D @champyin/toast
然后在專案中使用一下自己的插件，點擊按鈕就會彈出 toast 小提示了，
//在 main.js 中
import toast from '@champyin/toast';
Vue.use(toast);
//在 App.vue 中
handleClick(){
this.$toast();
}
專案體驗地址：http://champyin.com/toast/
npm 地址：https://www.npmjs.com/package/@champyin/toast
歡迎給我提 issue：https://github.com/yc111/toast/issues
Happy coding ??
文章同時發表于公眾號「前端手札」，喜歡的話可以關注一下哦，
更多參考：
https://cn.vuejs.org/v2/guide/plugins.html
https://cn.vuejs.org/v2/api/#Vue-extend-options
https://cli.vuejs.org/zh/guide/build-targets.html
https://webpack.js.org/guides/author-libraries/
https://docs.npmjs.com/cli-commands/link.html
https://docs.npmjs.com/cli-commands/pack.html
https://www.npmjs.com/package/@champyin/toast
本文作者：ChampYin
轉載請注明出處：http://champyin.com/2020/03/05/開發一個Vue插件/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143521.html
標籤：JavaScript