用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>
<div id="flag">
...
</div>
</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 打包進元件庫。但是，如果你將打包後的元件庫以 <script> 標籤形式直接引入，你會發現並不能正常執行，提示 vue 未定義。
以 <script> 標籤形式使用元件時，會同樣使用 <script> 標籤匯入 Vue。Vue 匯入的變數是 “window.Vue” 而不是 “window.vue”，因此會出現 vue 未定義的錯誤。
所以，我們需要在 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 run 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 height="30" width="120" @getCode="getCode"></flagCode>
methos: {
getCode(code) {
console.log(code)
}
}
2.2 釋出到npm
1、在 npm官網 註冊一個npm賬號
2、切換到需要發包的專案根目錄下，登入npm賬號，輸入使用者名稱、密碼、郵箱
npm login
3、最後一步，執行npm publish即可
# lin三、後記
折騰了很久，終於把vue-flag-list外掛的雛形釋出出去了，這是一個很簡單的外掛，以後會繼續維護它，新增更多的實用功能。
- git地址：https://github.com/LRithe/vue-flag-list
- npm unpublish --force：移除一個釋出包（也可以移除指定版本的包）
- npm logout：登出使用者