为了账号安全,请及时绑定邮箱和手机立即绑定

Vue插件打包与发布

标签:
Vue.js

插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,简单说明一下这个过程,以插件名 dialog 为例

  1. 创建 dialog 目录,并进入

  2. 运行命令行,初始化项目,生成 package.json

npm init -y
  1. 使用 webpack-simple 模板构建项目基本结构(前提为已自行安装好 vue-cli

vue init webpack-simple

根据导航提示,设置好项目后,基本结构生成完成

  1. 删除无用内容
    删除 index.htmlsrc 目录下的所有文件

  2. 复制插件内容到 src 目录中

  3. 修改 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"
  }
}
  1. 修改 webpack.config.jsoutput 部分配置

output: {    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    //修改输出打包后的脚本文件名,该文件即是 package.json 中配置的 main 属性的对应文件
    filename: 'dialog.js',
    //增加以下库配置信息
    library: 'Dialog',
    libraryTarget: 'umd',
    umdNamedDefine: true
}
  1. 安装库,国内环境建议使用 cnpm 安装速度会快些

npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. 编译插件

npm run build
  1. 发布插件,确定你的插件名当前公共库中不存在,否则会发布失败

npm publish

个人原创内容,转载请说明出处

完整内容:https://github.com/TerryZ



作者:Terry05
链接:https://www.jianshu.com/p/16cf8d022592


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消