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

插件打包與發佈 插件功能開發完成後,若須要發佈到公共組件庫中(例如: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')

實際的完整路徑便是

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 處理樣式,須要使用到圖片或圖標資源,儘量也使用圖片尺寸小的圖片,方便打包處理

相關文章
相關標籤/搜索