蝙蝠岛资源网

Vue插件打包与发布的方法示例
网络编程 2025/10/24 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

插件打包与发布

插件功能开发完成后，若需要发布到公共组件库中（例如：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]"htmlcode">



npm run build





会发现编译到 dist 目录中的内容已经没有图片文件，只有编译完成的 build.js 和对应的 map 文件，所以在插件开发时，尽可能使用 CSS 处理样式，需要使用到图片或图标资源，尽可能也使用图片尺寸小的图片，方便打包处理




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
Vue插件打包,Vue插件发布
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“Vue插件打包与发布的方法示例”

暂无Vue插件打包与发布的方法示例的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com