Vue插件打包與發(fā)布的方法示例

更新時(shí)間：2018年08月20日 15:07:18 作者：TerryZ

插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對(duì)插件進(jìn)行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下

插件打包與發(fā)布

插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對(duì)插件進(jìn)行打包并發(fā)布，簡(jiǎn)單說明一下這個(gè)過程，以插件名 dialog 為例

1、創(chuàng)建 dialog 目錄，并進(jìn)入

2、運(yùn)行命令行，初始化項(xiàng)目，生成 package.json

npm init -y

3、使用 webpack-simple 模板構(gòu)建項(xiàng)目基本結(jié)構(gòu)（前提為已自行安裝好 vue-cli）

vue init webpack-simple

根據(jù)導(dǎo)航提示，設(shè)置好項(xiàng)目后，基本結(jié)構(gòu)生成完成

4、刪除無用內(nèi)容刪除 index.html 和 src 目錄下的所有文件

5、復(fù)制插件內(nèi)容到 src 目錄中

6、修改 package.json 配置內(nèi)容

{
 "name": "dialog",
 "description": "the dialog plguin",
 "version": "1.0.0",
 "author": "TerryZ <terry5@foxmail.com>",
 "license": "MIT",
 //刪除原有的"priveate": true，發(fā)布到公共庫的項(xiàng)目，不能設(shè)置該參數(shù)
 //增加 main 配置，設(shè)置插件在安裝后的主入口文件
 "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"
 },
 //增加插件關(guān)鍵字描述，非必須，按需設(shè)置
 "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 屬性的對(duì)應(yīng)文件
  filename: 'dialog.js',
  //增加以下庫配置信息
  library: 'Dialog',
  libraryTarget: 'umd',
  umdNamedDefine: true
}

8、安裝庫，國(guó)內(nèi)環(huán)境建議使用 cnpm 安裝速度會(huì)快些

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

9、編譯插件

npm run build

10、發(fā)布插件，確定你的插件名當(dāng)前公共庫中不存在，否則會(huì)發(fā)布失敗

npm publish

圖片資源打包

插件中使用到的圖片資源，在打包后，根據(jù)模板的默認(rèn)配置，會(huì)將圖片資源輸出到 dist 目錄中，此時(shí)就有圖片引用路徑問題。在樣式內(nèi)容中會(huì)發(fā)現(xiàn)原來設(shè)置的

background-image:url('../image/a.jpg')

會(huì)轉(zhuǎn)換成

background-image:url('/dist/a.jpg')

實(shí)際的完整路徑即是

http://xxx.com/dist/a.jpg

我們知道插件在安裝后，會(huì)統(tǒng)一安裝在 node_modules 目錄中，這樣的目錄顯然是不正確的

一種折中的辦法，就是將圖片資源轉(zhuǎn)換成 base64 編碼，不生成實(shí)體圖片

webpack-simple 中默認(rèn)使用 file-loader 來處理圖片，這里換成 url-loader，兩者的區(qū)別在于后者是前者的功能封裝，還增加了將圖片編碼為 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 參數(shù)，該參數(shù)設(shè)置了圖片容量在小于指定容量(上例設(shè)置為30kb)時(shí)，不會(huì)轉(zhuǎn)換成 base64

如此調(diào)整配置后，再運(yùn)行編譯

npm run build

會(huì)發(fā)現(xiàn)編譯到 dist 目錄中的內(nèi)容已經(jīng)沒有圖片文件，只有編譯完成的 build.js 和對(duì)應(yīng)的 map 文件，所以在插件開發(fā)時(shí)，盡可能使用 CSS 處理樣式，需要使用到圖片或圖標(biāo)資源，盡可能也使用圖片尺寸小的圖片，方便打包處理

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: