Vue插件打包与发布的方法示例
插件打包与发布
插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，简单说明一下这个过程，以插件名 dialog 为例
1、创建 dialog 目录，并进入
2、运行命令行，初始化项目，生成 package.json
npm init -y
3、使用 webpack-simple 模板构建项目基本结构（前提为已自行安装好 vue-cli）
vue init webpack-simple
根据导航提示，设置好项目后，基本结构生成完成
4、删除无用内容 删除 index.html 和 src 目录下的所有文件
5、复制插件内容到 src 目录中
6、修改 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"
}
}
7、修改 webpack.config.js 的 output 部分配置
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
//修改输出打包后的脚本文件名，该文件即是 package.json 中配置的 main 属性的对应文件
filename: 'dialog.js',
//增加以下库配置信息
library: 'Dialog',
libraryTarget: 'umd',
umdNamedDefine: true
}
8、安装库，国内环境建议使用 cnpm 安装速度会快些
npm install -g cnpm --registry=https://registry.npm.taobao.org
9、编译插件
npm run build
10、发布插件，确定你的插件名当前公共库中不存在，否则会发布失败
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 处理样式，需要使用到图片或图标资源，尽可能也使用图片尺寸小的图片，方便打包处理
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Vuex之理解Store的用法，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中2017-04-04
现在的手机五花八门,造就了移动端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持与UI图一致的效果,就成了让前端不得不头疼的问题,下面这篇文章主要给大家介绍了vue实现移动端适方案的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了Vue 项目中Echarts 5使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Vue通过provide inject实现组件通信,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了vue中的数字滚动和翻牌器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue自定义权限指令的实现2024-05-05
今天小编就为大家分享一篇解决vue中post方式提交数据后台无法接收的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
今天小编就为大家分享一篇vue里input根据value改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在本篇文章里小编给大家分享了关于VUE前后端学习tab写法实例以及相关知识点，需要的朋友们参考下。2019-08-08
axios作为Vue生态系统中浓墨重彩的一笔,我学习这个东西也是花了一定的时间的,下面这篇文章主要给大家介绍了关于axios和vue整合操作的相关资料,需要的朋友可以参考下2022-04-04
最新评论