ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

发布一个Vue插件

2021-04-13 11:04:55  阅读:102  来源: 互联网

标签:npm 插件 Vue -- scrawl js 发布 vue


前言

本文就跟大家分享下如何使用CLI从零开始开发一个支持Vue2的库,并上传至npm,欢迎各位感兴趣的开发者阅读本文。

  • 本文发布的插件地址:v-scrawl
  • 本文插件的实现代码以及思路:v-scrawl实现方式
    开发不易,如果可以给我点个star好吗

实现思路

本文使用的vue-cli3,因为vue3现在个人认为应用范围还不是很大,所以这里发布的是vue2版本的插件

  • 创建项目
  • 完善相关配置
  • 添加库描述
  • 发布至npm

实现流程

创建项目

本文就以我最近写的一个vue版本的涂鸦板为例子,具体的内容可以查看以下:

完善相关配置

废话不多说马上开干

配置css内联

假如不配置这个的话,会导致后面在使用这个插件的时候,还需要再单独引入一次css文件,因为我们正常的打包的时候,是把js跟css分开打包的,所以这里就将所有的插件内容整合到一起,
vue.config.js配置。

module.exports = {
    // 强制css内联
    css: { extract: false }
}

修改package.json配置

在这里,我们需要将我们的package.json文件稍微改动一下,首先是我们正常开发的时候,我们是把依赖放进了dependencies这个配置里面,就像下面这样

"dependencies": {
    "vue": "^2.6.10",
    "core-js": "^2.6.5",
  },

但是在我们开发插件的时候,这种写法就有可能导致用户在安装我们插件的时候安装多了一个vue,导致报错,所以我们需要修改一下,把它放进peerDependencies里面。

"peerDependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },

然后就是添加一条我们专门使用来生成依赖包的文件。


  "scripts": {
   ...
    "sc":"vue-cli-service build --target lib --name vScrawl --dest dist src/scrawl/index.js"
  },

vue-cli-service build --target lib --name vScrawl --dest dist src/scrawl/index.js

  • vScrawl是打包文件的文件名
  • src/scrawl/index.js是指定入口文件
    然后在指定我们npm发布包的文件,在package.js,添加main
{
  "main": "dist/vScrawl.common.js",
}

那么到了这里,该修改的配置基本就修改完了

添加库描述

不要小看这一步,这一步很重要,先来看一下各个描述的意思

  • name 插件名称
  • version 版本号
  • description 插件简述
  • private 是否私有
  • main 库的入口文件位置(打包后的入口文件)
  • repository 仓库信息
  • keywords 关键词
  • author 库作者
  • license 库遵守的开源协议
  • bugs bug反馈地址
    在这里面,privatekeywords,repository,这几个特别重要。因为keywords关系到别人能不能找到你这个项目,其他两个就不用说了,你懂得,配置完成之后大概如下图,这里使用的配置是我发布的插件
{
  "name": "v-scrawl",
  "version": "1.0.7",
  "description": "v-scrawl是一个vue版本的涂鸦板,目前测试可以使用的有pc,h5。理论上在所有支持canvas的浏览器中都可以使用",
  "main": "dist/vScrawl.common.js",
  "keyword": "tuya vue scrawl palette",
  "author": "PJ",
  "license": "MIT",
  "private": false,
  "bugs": {
    "url": "https://github.com/956632862/v-scrawl/issues"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:956632862/v-scrawl.git"
  },
}

到这里,这个项目发布到npm的准备工作就全部做完了

发布到npm

发布包需要先去npm确认一下,没有相同名字的npm包才可以继续发布
这里需要先登陆,如果没有npm账号的话,先去注册一个npm

npm login

登陆完成之后,进行打包发布,这里要注意版本号不能跟npm的相同

// 打包
yarn sc
// 发布
npm publish

然后打开自己的npm,不出意外,在首页那里就可以看见你的包啦

标签:npm,插件,Vue,--,scrawl,js,发布,vue
来源: https://www.cnblogs.com/mxdmg/p/14652095.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有