Vue插件打包与发布的方法示例


Posted in Javascript onAugust 20, 2018

插件打包与发布

插件功能开发完成后,若需要发布到公共组件库中(例如: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 处理样式,需要使用到图片或图标资源,尽可能也使用图片尺寸小的图片,方便打包处理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
快速入门Vue
Dec 19 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 #Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 #Javascript
Vue2.0生命周期的理解
Aug 20 #Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 #Javascript
RequireJS用法简单示例
Aug 20 #Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 #Javascript
You might like
php学习之function的用法
2012/07/14 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php的dl函数用法实例
2014/11/06 PHP
orm获取关联表里的属性值
2016/04/17 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
php输出形式实例整理
2020/05/05 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python文件和目录操作详解
2015/02/08 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Django通过json格式收集主机信息
2020/05/29 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
车间班组长的职责
2013/12/13 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技