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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Pygame的程序开始示例代码
2020/05/07 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
个人自荐信
2013/12/05 职场文书
校运会入场式解说词
2014/02/10 职场文书
财务人员入职担保书
2015/09/22 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电