记录编写vue-big-wheel 组件发布到 NPM 全过程

  • 2019-03-27
  • 0
  • 0

初始化项目

我用的Vue CLI3初始化的项目,这里就不详细讲初始化项目过程,不太了解的可以看下官方文档,这里就说下一些注意点

依赖要少


因为是要发布组件,所以运行依赖一定要少,因为运行依赖,别人再npm安装你的包,会把你组件的运行依赖也会安装,为了组件不臃肿,所以最好保持纯净,axios、vuex、vue-router等这些都不要装,怎么看项目有哪些运行依赖,打开package.json,dependencies里的就是运行依赖(运行依赖就是打包后还必须需要的),devDependencies是开发依赖,开发依赖打包后不会存在打包文件里,所以开发依赖可以随意装,我运行依赖就只装了Vue

完善项目基本信息


package.json文件以下字段

  • name:就是发布到npm上的包名,也是别人安装时输入的名字,npm i ${name},不能和别人组件重名

  • version:版本号,关于怎么安排版本号,可以看这里,默认是 0.1.0 ,之后每次发布,都要修改版本号

  • private:设置为 false 才能发布

  • author:作者信息,格式一般是${your name} ${email}

  • main:入口文件,指向我们打包好的 js 文件

  • description:是对包的描述,在npmjs.com上搜索时会显示,有助于用户在搜索时进行筛选

  • keywords:同样也是帮助用户查找到你的包

  • repository:

    "repository": {
    "type": "git",
    "url": "https://github.com/iamobj/vue-big-wheel"
    }
    

    这样在npm包页面就有会个github的入口

以下是我这些字段的配置

{
  "name": "vue-big-wheel",
  "version": "0.1.4",
  "private": false,
  "author": "Ruan HongChao c@rhc.im",
  "main": "./dist/vueBigWheel.umd.min.js",
  "description": "基于vue2.*开发的大转盘抽奖组件,开箱即用!",
  "keywords": ["幸运大转盘","vue幸运大转盘","vue大转盘","大转盘抽奖"],
  "repository": {
    "type": "git",
    "url": "https://github.com/iamobj/vue-big-wheel"
  },
}

编写组件

这一步就是我们熟悉的 Vue 开发了,在components文件夹里新建一个文件夹用来存放你编写的组件,文件夹里建一个组件vue文件和一个index.js文件,如下图所示

企业微信截图_20190328111422.jpg

index.js做为组件的入口文件:

import vueBigWheel from './vue-big-wheel.vue'
export default vueBigWheel

最后在App.vue引入import vueBigWheel from "@/components/vue-big-wheel/index",引入使用成功后,我们就回到组件vue文件正式开始我们的组件编写工作

注:上图中的_base64.js文件大家可以忽略,那是我开始按钮图片的base64,因为放在组件里会导致代码不好看,所以单独一个文件存放,至于为什么会用base64,那是因为图片就算放在组件同个目录下,引入,本地开发没问题的,但是发布到npm上,然后npm安装我们的组件,图片路径就是错误的显示不出来,没想到更好的办法,就用这个笨办法把图片转成base64

编写组件就和我们自己在项目里写组件一样,这里就不详细说,就说一些我认为要说的吧

canvasAPI文档


因为很久没用过canvas了,做之前也是做了些功课,看了些canvas画转盘的代码,结合张鑫旭老师的canvasAPI文档,学习了一波,canvas的api文档,推荐看张老师的,详细。这里说个题外话,张老师的博客干货太多了,强烈推荐看,算是比较通俗易懂,不忙就看上一篇,一次看一篇,细细品尝;有时候遇到的一些css问题,在这里搜索也能找到答案

css选择器命名


建议下划线加组件名作为前缀(如:._big-wheel-canvas),避免别人使用你的组件的时候,想渗透改组件内部的样式,和他们现有项目命名有同名的

移动端canvas不支持rem


因为想着要做自适应,canvas里的字体大小应该使用rem,本地电脑开发ok,一切正常,用移动真机测试时候,不支持

搜索得知canvas使用rem在手机上是不支持rem这个单位,但是在PC上的chrome浏览器是没问题的,那就只能用px单位了;其实画板就用px单位就可以了,因为当你屏幕大的时候,画板呈现在网页上的大小也大,里面的内容也会跟着放大,缩小也一样,可以理解成画板画完内容后在网页上是以一张图片呈现,图片里的内容会根据整张图的大小去放大缩小

本身也就是个小组件,更关键的是那些旋转的角度规律、算法,这些就不详细讲了,都是自己套数据,一组一组对比寻找规律

打包组件

直接项目运行build任务是打包整个项目,而我们希望打包出是库的形式,所以需要新增一个任务,打开package.json ,修改 script 里的内容为:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-lib": "vue-cli-service build --target lib --name vueBigWheel ./src/components/vue-big-wheel/index.js"
  },

新增一个build-lib任务,然后在项目根目录新建一个 vue.config.js 文件,写入:

module.exports = {
  // 因为打包出来的库会将 css 单独提取到 css 文件里,设置 extract 为 false 则会强制内联。
  css: {
    extract: false
  }
}

上面步骤编辑保存后,就执行npm run build-lib任务,执行完会在根目录生成好打包出来的文件

发布组件

准备工作


  • 打开 .gitignore 文件,删掉 dist/ ,要不然发布的时候 dist 目录会被忽略掉不被发布到 NPM
  • 接着打开 README.md 给我们的组件写一份完整的介绍吧,方便别人了解我们的组件是做什么的,以及怎么使用
  • 最后我们访问 NPM 并注册好自己的账号,接下来就可以开始发布了

发布


在项目根目录下运行 npm login 进行登录,登录时候输入密码是不会显示,实际是输入了的,这里要注意下,远程连过服务器应该知道,和登录服务器输入密码一样不会显示出来,登录成功后再执行 npm publish 就会开始发布操作

  • 登录成功后,登录信息会存放于全局,也就是说,下次更新发布组件,不需要再重新登录,直接执行 npm publish 即可。
  • 通过 npm whoami 可查看当前登录账号名。

安装测试


发布完成后自己在项目执行npm i vue-big-wheel -S,安装完成后,就可以在页面vue文件引入使用了import vueBigWheel from "vue-big-wheel"

最后

vue-big-wheel组件开源地址:https://github.com/iamobj/vue-big-wheel觉得不错给个star鼓励下呀:satisfied:

使用文档:https://wheel.assetss.cn/docs

demo:https://wheel.assetss.cn用手机扫描二维码体验比较好,demo做的是针对移动端的,pc看上去会很大

最后再说一下,这个在线文档是使用docsify生成的!

评论

还没有任何评论,你来说两句吧