Vue插件打包与发布的方法示例
插件打包与发布插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，简单说明一下这个过程，以插件名 dialog 为例 1、创建 dialog 目录，并进入 2、运行命令行，初始化项目，生成 package.json 3、使用 webpack-simple 模板构建项目基本结构（前提为已自行安装好 vue-cli） 根据导航提示，设置好项目后，基本结构生成完成 4、删除无用内容 删除 index.html 和 src 目录下的所有文件 5、复制插件内容到 src 目录中 6、修改 package.json 配置内容 ","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 部分配置 8、安装库，国内环境建议使用 cnpm 安装速度会快些 9、编译插件 10、发布插件，确定你的插件名当前公共库中不存在，否则会发布失败 图片资源打包插件中使用到的图片资源，在打包后，根据模板的默认配置，会将图片资源输出到 dist 目录中，此时就有图片引用路径问题。在样式内容中会发现原来设置的
会转换成
实际的完整路径即是
我们知道插件在安装后，会统一安装在 一种折中的办法，就是将图片资源转换成
安装 url-loader webpack 配置修改(webpack-simple 模板) 上面的配置中，将原 file-loader 更换了 url-loader，并增加 limit 参数，该参数设置了图片容量在小于指定容量(上例设置为30kb)时，不会转换成 base64 如此调整配置后，再运行编译 会发现编译到 dist 目录中的内容已经没有图片文件，只有编译完成的 build.js 和对应的 map 文件，所以在插件开发时，尽可能使用 CSS 处理样式，需要使用到图片或图标资源，尽可能也使用图片尺寸小的图片，方便打包处理 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |