實例詳解用vue封裝插件並發佈到npm
- 小云云原創
- 2018-01-09 15:16:471873瀏覽
本文主要介紹了用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 id="flag">
...
</p>
</template>
<script>
export default {
name: 'vue-flag-list',
...
}
</script>
<style scoped>
...
</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 打包進元件庫。但是，如果你將打包後的元件庫以