发布一个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,不出意外,在首页那里就可以看见你的包啦

posted @ 2021-04-13 10:40  一枚找不到名的程序猿  阅读(129)  评论(0编辑  收藏  举报