如何開發和發佈一個Vue插件

来源:https://www.cnblogs.com/champyin/archive/2020/03/09/12449310.html
-Advertisement-
Play Games

Vue 項目開發過程中，經常用到插件，比如原生插件 `vue-router`、`vuex`，還有 `element-ui` 提供的 `notify`、`message` 等等。這些插件讓我們的開發變得更簡單更高效。那麼 Vue 插件是怎麼開發的呢？如何自己開發一個 Vue 插件然後打包發佈到npm？ ...


前言

Vue 項目開發過程中，經常用到插件，比如原生插件 vue-router、vuex，還有 element-ui 提供的 notify、message 等等。這些插件讓我們的開發變得更簡單更高效。那麼 Vue 插件是怎麼開發的呢？如何自己開發一個 Vue 插件然後打包發佈到npm？

本文涉及技術點：

  1. Vue 插件的本質
  2. Vue.extend() 全局方法
  3. 如何手動掛載 Vue 實例
  4. Vue.use() 的原理
  5. 如何打包成 umd 格式
  6. 發佈前如何測試 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()： ```vue // 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
})
}
}
}

``運行後在頁面上點擊按鈕，彈出成功` 的提示，然後3秒後消失。

how-to-write-a-vue-plugin01.jpg

線上體驗地址：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 :)

文章同時發表於公眾號「前端手札」，喜歡的話可以關註一下哦。

qianduanshouzha-gzh.png

更多參考：
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插件/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML5自帶驗證美化
    常用的偽類和css選擇器： :required :optional 必填元素和選填元素 :in-range :out-of-range 在範圍之內和不在範圍之內 :valid :invalid 符合要求的和不符合要求的 :read-only :read-write 只讀和可讀可寫 （ :read-w ...
  • HTML5約束驗證API
    HTML5約束驗證API： willValidate 表示如果元素的約束沒有被符合則值為 false validity validationMessage 用於描述與元素相關約束的失敗信息。 checkValidity() 表示如果元素沒有滿足它的任意約束，返回false，其他情況返回 true s ...
  • ES6 - 基礎學習(17): 用Proxy進行預處理
    概述 Proxy 與 Reflect是 ES6為了操作對象引入的 API 。Proxy可以對目標對象的讀取、函數調用等操作進行攔截，然後進行操作處理。它不直接操作對象，而是像代理模式，通過對象的代理對象進行操作，在進行這些操作時，可以添加一些需要的額外操作。 Proxy的存在就相當於 在對象的讀取、 ...
  • vue源碼(一) this.data是怎麼來的？
    0.獲取源碼 https://github.com/vuejs/vue 從github地址，直接download下來就行了。在新建項目的時候也可以node_modelus里的vue搭配著看。 1.數據的掛載 首先先引入vue，然後新建他的實例。 首先我們得知道我們引入 的是個什麼東西。所以我們找到源 ...
  • H5微信分享的坑
    H5微信是沒有直接分享的功能，想要微信分享，只能用微信內置好的分享菜單，所以，想自定義微信直接分享的朋友們，趁早換種方式吧，比如改為二維碼形式也不錯 前言 微信jssdk文檔介紹的微信分享api不詳細，坑賊多，還限制多，太霸道了 微信分享的坑 在可以調用微信jssdk的基礎介面前提下，調起分享介面， ...
  • 當年自學web前端的時候走了很多彎路，今天分享給大家
    努力的一天又開始了，編輯這一篇文章，寫下當初我自學web前端走的彎路，希望大家引以為戒，不要多走前人走過的彎路，浪費時間。 彎路一：盲目的去學當初我在對於web前端這個行業什麼都不瞭解的情況下，比如：不知道未來發展趨勢，不知道學習web前端應該註意哪些初始問題，不知道具體的學習規劃學習路線等等，一味 ...
  • 自適應寬高
    寬度自適應： 預設寬度100%的元素 width:;單位為% 最小寬度自適應： min-width:; 最大寬度自適應： max-width:; 高度自適應： 不寫height,讓內容撐起 height:50%; 前提==>html,body{height:100%;} 最小高度自適應： min-h ...
  • 擼一個簡單的vue-router來剖析原理
    理解 隨著前端業務的發展， 我們一般在寫一個較為大型的 項目時候，會使用到 ，來根據指定的 或者 來進行內容的分發，可以達到不像服務端發送請求，就完成頁面內容的切換，能夠減少像伺服器發送的請求，讓用戶進行頁面跳轉時候能夠更快，體驗更好 疑問 在初學 的時候，一般人都會有一個印象， 以及 都是 原生自 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類