Vue外掛打包與釋出

TerryZ發表於2018-08-16
Vue

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

  1. 建立 dialog 目錄，並進入
  2. 執行命令列，初始化專案，生成 package.json
npm init -y
複製程式碼
  1. 使用 webpack-simple 模板構建專案基本結構（前提為已自行安裝好 vue-cli）
vue init webpack-simple
複製程式碼

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

  1. 刪除無用內容   刪除 index.html 和 src 目錄下的所有檔案
  2. 複製外掛內容到 src 目錄中
  3. 修改 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"
  }
}
複製程式碼
  1. 修改 webpack.config.js 的 output 部分配置
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    //修改輸出打包後的指令碼檔名，該檔案即是 package.json 中配置的 main 屬性的對應檔案
    filename: 'dialog.js',
    //增加以下庫配置資訊
    library: 'Dialog',
    libraryTarget: 'umd',
    umdNamedDefine: true
}
複製程式碼
  1. 安裝庫，國內環境建議使用 cnpm 安裝速度會快些
npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼
  1. 編譯外掛
npm run build
複製程式碼
  1. 釋出外掛，確定你的外掛名當前公共庫中不存在，否則會發布失敗
npm publish
複製程式碼

個人原創內容，轉載請說明出處

完整內容：github.com/TerryZ

相關文章