Vue外掛打包與釋出的方法示例

Vue · 發表 2018-11-25 17:01:18

摘要：外掛打包與釋出外掛功能開發完成後，若需要釋出到公共元件庫中（例如：npmjs），需要對外掛進行打包併發布，簡單說明一下這個過程，以外掛名 dialog 為例 1、建立 dialog 目錄，並進入 2、執行命令列，初始化專案，生成 package....

外掛打包與釋出

外掛功能開發完成後，若需要釋出到公共元件庫中（例如：npmjs），需要對外掛進行打包併發布，簡單說明一下這個過程，以外掛名 dialog 為例

1、建立 dialog 目錄，並進入

2、執行命令列，初始化專案，生成 package.json

npm init -y

3、使用 webpack-simple 模板構建專案基本結構（前提為已自行安裝好 vue-cli）

vue init webpack-simple

根據導航提示，設定好專案後，基本結構生成完成

4、刪除無用內容刪除 index.html 和 src 目錄下的所有檔案

5、複製外掛內容到 src 目錄中

6、修改 package.json 配置內容

//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力
{
 "name": "dialog",
 "description": "the dialog plguin",
 "version": "1.0.0",
 "author": "TerryZ <[email protected]>",
 "license": "MIT",
 //刪除原有的"priveate": true，釋出到公共庫的專案，不能設定該引數
 //增加 main 配置，設定外掛在安裝後的主入口檔案
 "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"
 },
 //增加外掛關鍵字描述，非必須，按需設定
 "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"
 }
}
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力

7、修改 webpack.config.js 的 output 部分配置

output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
//修改輸出打包後的指令碼檔名，該檔案即是 package.json 中配置的 main 屬性的對應檔案
filename: 'dialog.js',
//增加以下庫配置資訊
library: 'Dialog',
libraryTarget: 'umd',
umdNamedDefine: true
}

8、安裝庫，國內環境建議使用 cnpm 安裝速度會快些

npm install -g cnpm --registry=https://registry.npm.taobao.org

9、編譯外掛

npm run build

10、釋出外掛，確定你的外掛名當前公共庫中不存在，否則會發布失敗

npm publish

圖片資源打包

外掛中使用到的圖片資源，在打包後，根據模板的預設配置，會將圖片資源輸出到 dist 目錄中，此時就有圖片引用路徑問題。在樣式內容中會發現原來設定的

background-image:url('../image/a.jpg')

會轉換成

background-image:url('/dist/a.jpg')

實際的完整路徑即是

ofollow,noindex">http://xxx.com/dist/a.jpg

我們知道外掛在安裝後，會統一安裝在 node_modules 目錄中，這樣的目錄顯然是不正確的

一種折中的辦法，就是將圖片資源轉換成 base64 編碼，不生成實體圖片

webpack-simple 中預設使用 file-loader 來處理圖片，這裡換成 url-loader，兩者的區別在於後者是前者的功能封裝，還增加了將圖片編碼為 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 引數，該引數設定了圖片容量在小於指定容量(上例設定為30kb)時，不會轉換成 base64

如此調整配置後，再執行編譯

npm run build

會發現編譯到 dist 目錄中的內容已經沒有圖片檔案，只有編譯完成的 build.js 和對應的 map 檔案，所以在外掛開發時，儘可能使用 CSS 處理樣式，需要使用到圖片或圖示資源，儘可能也使用圖片尺寸小的圖片，方便打包處理

Vue外掛打包與釋出的方法示例

您可能也會喜歡…