发布一个Vue插件
前言
本文就跟大家分享下如何使用CLI从零开始开发一个支持Vue2的库，并上传至npm，欢迎各位感兴趣的开发者阅读本文。
- 本文发布的插件地址：v-scrawl
- 本文插件的实现代码以及思路：v-scrawl实现方式
开发不易，如果可以给我点个star好吗
实现思路
本文使用的vue-cli3，因为vue3现在个人认为应用范围还不是很大，所以这里发布的是vue2版本的插件
- 创建项目
- 完善相关配置
- 添加库描述
- 发布至npm
实现流程
创建项目
本文就以我最近写的一个vue版本的涂鸦板为例子，具体的内容可以查看以下：
- 线上体验版本
- 本文发布的插件地址：v-scrawl
- 本文插件的实现代码以及思路：v-scrawl实现方式
完善相关配置
废话不多说马上开干
配置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反馈地址
在这里面，private，keywords,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，不出意外，在首页那里就可以看见你的包啦
