插件打包與發(fā)布
成都服務(wù)器托管，成都創(chuàng)新互聯(lián)公司提供包括服務(wù)器租用、成都移動云計算中心、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、空間域名等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：18982081108
插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對插件進(jìn)行打包并發(fā)布，簡單說明一下這個過程，以插件名 dialog 為例
1、創(chuàng)建 dialog 目錄，并進(jìn)入
2、運(yùn)行命令行，初始化項(xiàng)目，生成 package.json
npm init -y
3、使用 webpack-simple 模板構(gòu)建項(xiàng)目基本結(jié)構(gòu)（前提為已自行安裝好 vue-cli）
vue init webpack-simple
根據(jù)導(dǎo)航提示，設(shè)置好項(xiàng)目后，基本結(jié)構(gòu)生成完成
4、刪除無用內(nèi)容 刪除 index.html 和 src 目錄下的所有文件
5、復(fù)制插件內(nèi)容到 src 目錄中
6、修改 package.json 配置內(nèi)容
重慶分公司
重慶分公司
{
"name": "dialog",
"description": "the dialog plguin",
"version": "1.0.0",
"author": "TerryZ ",
"license": "MIT",
//刪除原有的"priveate": true，發(fā)布到公共庫的項(xiàng)目，不能設(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"
}
}
7、修改 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
}
8、安裝庫，國內(nèi)環(huán)境建議使用 cnpm 安裝速度會快些
npm install -g cnpm --registry=https://registry.npm.taobao.org
9、編譯插件
npm run build
10、發(fā)布插件，確定你的插件名當(dāng)前公共庫中不存在，否則會發(fā)布失敗
npm publish
圖片資源打包
插件中使用到的圖片資源，在打包后，根據(jù)模板的默認(rèn)配置，會將圖片資源輸出到 dist 目錄中，此時就有圖片引用路徑問題。在樣式內(nèi)容中會發(fā)現(xiàn)原來設(shè)置的
background-image:url('../image/a.jpg')
會轉(zhuǎn)換成
background-image:url('/dist/a.jpg')
實(shí)際的完整路徑即是
/upload/otherpic73/38651.jpg
我們知道插件在安裝后，會統(tǒng)一安裝在 node_modules 目錄中，這樣的目錄顯然是不正確的
一種折中的辦法，就是將圖片資源轉(zhuǎn)換成 base64 編碼，不生成實(shí)體圖片
webpack-simple 中默認(rèn)使用 file-loader 來處理圖片，這里換成 url-loader，兩者的區(qū)別在于后者是前者的功能封裝，還增加了將圖片編碼為 base64 的功能，所以可以放心使用
安裝 url-loader
npm i url-loader --save-dev
webpack 配置修改(webpack-simple 模板)
module.exports = {
...
module: {
rules: [
{...},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 30000,
name: '[name].[ext]?[hash]'
}
}
]
},
...
}
上面的配置中，將原 file-loader 更換了 url-loader，并增加 limit 參數(shù)，該參數(shù)設(shè)置了圖片容量在小于指定容量(上例設(shè)置為30kb)時，不會轉(zhuǎn)換成 base64
如此調(diào)整配置后，再運(yùn)行編譯
npm run build
會發(fā)現(xiàn)編譯到 dist 目錄中的內(nèi)容已經(jīng)沒有圖片文件，只有編譯完成的 build.js 和對應(yīng)的 map 文件，所以在插件開發(fā)時，盡可能使用 CSS 處理樣式，需要使用到圖片或圖標(biāo)資源，盡可能也使用圖片尺寸小的圖片，方便打包處理
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
