實例詳解用vue封裝插件並發佈到npm

本文主要介紹了用vue封裝外掛並發佈到npm的方法步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

一、基於vue的國家區號列表

vue-flag-list包含了大部分國家的區號，點擊右邊的三角形展開列表可以選擇國家區號，若列表中沒有區號，也可以自己輸入區號。

全球區號清單

1.1 初始化元件

用的是vue-cli來初始化元件，雖然有很多東西不需要，因為對這個比較熟悉，所以還是照這個步驟來。

vue init webpack vue-flag-list
cd vue-flag-list
cnpm install 
npm run dev

1.2 根據自己的需求，實作具體功能，我的主要功能寫在vue-flag-list.vue元件中。

<template>
 <p>
 ...
 </p>
</template>

<script>
 export default {
  name: &#39;vue-flag-list&#39;,
  ...
 }
</script>

<style>
 ...
</style>

功能寫好後，修改package.json等設定文件，為打包發布做準備

1.3 新增index.js

import flagComponent from './Vue-Flag-List.vue'

const VueFlagList = {
 install: function (Vue) {
 if (typeof window !== 'undefined' && window.Vue) {
  Vue = window.Vue
 }
 Vue.component('VueFlagList', flagComponent)
 }
}

export default VueFlagList

1.4 修改設定檔

1.4.1 package.json

{
 "name": "vue-flag-list",
 "version": "1.0.0",
 "description": "A vue plugin for entering and selecting area code",
 "author": "guimin",
 // 因为组件包是公用的，所以private为false
 "private": false,
 // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
 "main": "dist/vue-flag-list.min.js", 
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js"
 },
 // 指定代码所在的仓库地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/linmoer/vue-flag-list.git"
 },
 // 指定打包之后，包中存在的文件夹
 "files": [
 "dist",
 "src"
 ],
 // 指定关键字
 "keywords": [
 "vue",
 "flag",
 "code",
 "flag code"
 ],
 "license": "MIT", //开源协议
 // 项目官网的url
 "homepage": "https://github.com/linmoer/vue-flag-list#readme",
 "dependencies": {
 "vue": "^2.3.3"
 },
 "devDependencies": {
 ...
 },
 "engines": {...},
 "browserslist": [...]
}

1.4.2 .gitignore 檔案

因為要用dist資料夾，所以在.gitignore檔案中把dist/去掉。

1.4.3 webpack.prod.conf.js 檔案

為了支援多種使用場景，我們需要選擇適合的打包格式。常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環境執行，AMD 只能在瀏覽器端執行，UMD 同時支援兩種執行環境。顯而易見，我們應該選擇 UMD 格式。 Webpack 中指定輸出格式的設定項目為output.libraryTarget，其支援的格式有：

• 「var」 - 以變數形式輸出： var Library = xxx (default)；

• 「this」 - 以this 的一個屬性輸出： this[「Library」] = xxx;

• 「commonjs」 - 以exports 的一個屬性輸出：exports[“Library”] = xxx;

• “commonjs2” - 以module.exports 形式輸出：module.exports = xxx;

• #“amd” - 以AMD 格式輸出；

• “umd” - 同時以AMD、CommonJS2 和全域屬性形式輸出。

以下是 webpack.prod.conf.js 中 output 設定的範例：

 output: {
 path: path.resolve(__dirname, '../dist'),
 publicPath: '',
 filename: 'vue-flag-list.min.js',
 library: 'VueFlagList',
 libraryTarget: 'umd',
 umdNamedDefine: true
 },

Vue 是元件庫的外部相依性。元件庫的使用者會自行匯入 Vue，打包的時候，不應該將 Vue 打包進元件庫。但是，如果你將打包後的元件庫以 <script> 標籤形式直接引入，你會發現並不能正常執行，提示 vue 未定義。 <br/></script>

以 <script> 標籤形式使用元件時，會同樣使用 <script> 標籤匯入 Vue。 Vue 匯入的變數是 “window.Vue” 而不是 “window.vue”，因此會出現 vue 未定義的錯誤。 </script>

所以，我們需要在webpack.prod.conf.js 中設定externals，如下：

externals: {
 vue: {
  root: 'Vue',
  commonjs: 'vue',
  commonjs2: 'vue',
  amd: 'vue'
 }
 },

另外，為了將css打包成一個文件，所以需要將webpack.prod.conf. js 中的plugins 選項的

new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),

修改為

new ExtractTextPlugin({
  filename: 'vue-flag-list.min.css'
 }),

修改入口檔案

entry: {
 app: './src/index.js'
 },

1.5 整理一下目錄結構，我的目錄結構如下：

- vue-flag-list
 + build
 + dist
 - src
 + img
 index.js
 Vue-Flag-List.vue
 ...

二、用npm發布一個包

在發正式包之前可以在本地先打一個包，然後測試下有沒有問題，如果沒問題再發佈到npm上。

2.1 打包到本機使用

npm build
npm pack

npm pack 之後，就會在目前目錄下產生 vue-flag-list-1.0.0.tgz 的檔案。

開啟新的vue項目，在目前路徑下執行('路徑' 表示檔案所在的位置)

cnpm install 路径/vue-flag-list-1.0.0.tgz

在新專案的入口檔案（main.js）中引入

import VueFlagList from 'vue-flag-list'
import 'vue-flag-list/dist/vue-flag-list.min.css'

Vue.use(VueFlagList)

在元件中使用

<flagcode></flagcode>

methos: {
 getCode(code) {
  console.log(code)
 }
}

2.2 發佈到npm

1、在npm官網註冊一個npm帳號

2、切換到需要發包的項目根目錄下，登入npm帳號，輸入使用者名稱、密碼、信箱

npm login

3、最後一步，執行npm publish即可

# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0

三、後記

#折騰了很久，終於把vue-flag-list插件的雛形發佈出去了，這是一個很簡單的插件，以後會繼續維護它，添加更多的實用功能。

• npm unpublish --force：移除一個發布套件（也可以移除指定版本的套件）

• npm logout：登出使用者

相關推薦：

jQuery封裝的分頁元件詳解

JavaScript模擬實作封裝的三種方式及寫法

php封裝搜尋類別實例

以上是實例詳解用vue封裝插件並發佈到npm的詳細內容。更多資訊請關注PHP中文網其他相關文章！