Vue插件打包與發布的方法示例

2019-11-19 13:12:24

字體：大中小

來源：轉載

供稿：網友

插件打包與發布

插件功能開發完成后，若需要發布到公共組件庫中（例如：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 配置內容

{ "name": "dialog", "description": "the dialog plguin", "version": "1.0.0", "author": "TerryZ <terry5@foxmail.com>", "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" }}

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')

實際的完整路徑即是

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

如此調整配置后，再運行編譯