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

插件打包與發佈 插件功能開發完成後，若須要發佈到公共組件庫中（例如：npmjs），須要對插件進行打包併發布，簡單說明一下這個過程，以插件名 dialog 爲例

一、建立 dialog 目錄，並進入

二、運行命令行，初始化項目，生成 package.json

npm init -y

三、使用 webpack-simple 模板構建項目基本結構（前提爲已自行安裝好 vue-cli）

vue init webpack-simple

根據導航提示，設置好項目後，基本結構生成完成

四、刪除無用內容 刪除 index.html 和 src 目錄下的全部文件 五、複製插件內容到 src 目錄中 六、修改 package.json 配置內容

//前端全棧學習交流圈：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 部分配置

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  //修改輸出打包後的腳本文件名，該文件便是 package.json 中配置的 main 屬性的對應文件
  filename: 'dialog.js',
  //增長如下庫配置信息
  library: 'Dialog',
  libraryTarget: 'umd',
  umdNamedDefine: true
}

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

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

九、編譯插件

npm run build

十、發佈插件，肯定你的插件名當前公共庫中不存在，不然會發布失敗

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