插件打包與發佈 插件功能開發完成後,若須要發佈到公共組件庫中(例如:npmjs),須要對插件進行打包併發布,簡單說明一下這個過程,以插件名 dialog 爲例javascript
一、建立 dialog 目錄,並進入css
二、運行命令行,初始化項目,生成 package.jsonhtml
npm init -y
三、使用 webpack-simple 模板構建項目基本結構(前提爲已自行安裝好 vue-cli)前端
vue init webpack-simple
根據導航提示,設置好項目後,基本結構生成完成vue
四、刪除無用內容 刪除 index.html 和 src 目錄下的全部文件 五、複製插件內容到 src 目錄中 六、修改 package.json 配置內容java
//前端全棧學習交流圈:866109386 //面向1-3經驗年前端開發人員 //幫助突破技術瓶頸,提高思惟能力 { "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" } } //前端全棧學習交流圈:866109386 //面向1-3經驗年前端開發人員 //幫助突破技術瓶頸,提高思惟能力
七、修改 webpack.config.js 的 output 部分配置node
output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', //修改輸出打包後的腳本文件名,該文件便是 package.json 中配置的 main 屬性的對應文件 filename: 'dialog.js', //增長如下庫配置信息 library: 'Dialog', libraryTarget: 'umd', umdNamedDefine: true }
八、安裝庫,國內環境建議使用 cnpm 安裝速度會快些webpack
npm install -g cnpm --registry=https://registry.npm.taobao.org
九、編譯插件web
npm run build
十、發佈插件,肯定你的插件名當前公共庫中不存在,不然會發布失敗vue-cli
npm publish
圖片資源打包 插件中使用到的圖片資源,在打包後,根據模板的默認配置,會將圖片資源輸出到 dist 目錄中,此時就有圖片引用路徑問題。在樣式內容中會發現原來設置的
background-image:url('../image/a.jpg')
會轉換成
background-image:url('/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 處理樣式,須要使用到圖片或圖標資源,儘量也使用圖片尺寸小的圖片,方便打包處理