插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對插件進(jìn)行打包并發(fā)布，簡單說明一下這個過程，以插件名 dialog 為例
- 創(chuàng)建
dialog目錄，并進(jìn)入 - 運行命令行，初始化項目，生成
package.json
npm init -y
- 使用
webpack-simple模板構(gòu)建項目基本結(jié)構(gòu)（前提為已自行安裝好vue-cli）
vue init webpack-simple
根據(jù)導(dǎo)航提示，設(shè)置好項目后，基本結(jié)構(gòu)生成完成
- 刪除無用內(nèi)容
刪除index.html和src目錄下的所有文件 - 復(fù)制插件內(nèi)容到
src目錄中 - 修改
package.json配置內(nèi)容
{
"name": "dialog",
"description": "the dialog plguin",
"version": "1.0.0",
"author": "TerryZ <terry5@foxmail.com>",
"license": "MIT",
//刪除原有的"priveate": true，發(fā)布到公共庫的項目，不能設(shè)置該參數(shù)
//增加 main 配置，設(shè)置插件在安裝后的主入口文件
"main": "dist/dialog.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
//增加插件關(guān)鍵字描述，非必須，按需設(shè)置
"keywords": [
"front-end",
"javascript",
"dialog",
"vue",
"vuejs"
],
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
- 修改
webpack.config.js的output部分配置
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
//修改輸出打包后的腳本文件名，該文件即是 package.json 中配置的 main 屬性的對應(yīng)文件
filename: 'dialog.js',
//增加以下庫配置信息
library: 'Dialog',
libraryTarget: 'umd',
umdNamedDefine: true
}
- 安裝庫，國內(nèi)環(huán)境建議使用
cnpm安裝速度會快些
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 編譯插件
npm run build
- 發(fā)布插件，確定你的插件名當(dāng)前公共庫中不存在，否則會發(fā)布失敗
npm publish
個人原創(chuàng)內(nèi)容，轉(zhuǎn)載請說明出處
完整內(nèi)容：https://github.com/TerryZ
