写点什么

在 npm 发布自己的组件

用户头像
空城机
关注
发布于: 2021 年 04 月 02 日
在npm发布自己的组件

作为一个前端打工人,可以尝试自己编写一些 UI 组件。


编写组件虽说不一定要使用,但也可以更好的提升自己的能力,在编写的过程中让自己思考变得更加全面


组件编写好之后肯定不能以后调用时就复制文件夹过去,这样太 low 了。前端人员可以将组件发布到 npm 上,以后就可以 npm install 下载自己的组件。


npm 简介:NPM 是随同 NodeJS 一起安装的包管理工具,能解决 NodeJS 代码部署上的很多问题。

正规介绍:https://docs.npmjs.com/about-npm


在前端开发过程中,大家肯定会涉及到使用 npm 的时候,就像 python 使用 pip 下载库一样的啦。


npm 发布流程

一、创建 npm 账号

npm 官网:npm官网


注册 npm 的账号非常简单,只需要一个邮箱即可,连手机都不需要


二、创建自己的组件

我创建的 vue 组件,npm init 新建一个项目在 npm 初始化时


  • package name 代表以后组件的名称

  • version 代表当前版本号

  • desrciption 可以描述一下该组件

  • entrt point 代表进入文件,默认 index.js 即可

  • keywords 代表关键词

  • author 作者

  • license 代表协议,npm 是使用 ISC,默认即可



这样项目的 package.json 就出来了


三、组件配置 index.js

编写好一部分组件之后,可以将这些组件配置到 index.js 当中



index.js 配置代码(这里的配置代码是我组件的,可以进行参考,毕竟我也是从 github 上下载别人发布的 npm 中参考得出的):


/** @author kongchengji* Date: 2021/2/1*/import Vue from 'vue'
import wzc_select from "./select/wzc-select";import wzc_option from "./select/wzc-option";import wzc_button from "./button/wzc-button";import wzc_switch from "./Switch/wzc-switch";import wzc_slider from "./Slider/wzc-slider";import wzc_collapse from "./Collapse/wzc-collapse";import wzc_collapse_item from "./Collapse/wzc-collapse-item";import wzc_color_picker from "./ColorPicker/wzc-color-picker";import wzc_timeline from "./TimeLine/wzc-timeline";import wzc_timeline_option from "./TimeLine/wzc-timeline-option";import wzc_dividingline from "./DividingLine/wzc-dividingline";import wzc_picview from "./PicView/wzc-picview"
const components = [ wzc_select, wzc_option, wzc_button, wzc_switch, wzc_collapse, wzc_collapse_item, wzc_color_picker, wzc_slider, wzc_timeline, wzc_timeline_option, wzc_dividingline, wzc_picview,]
const install = function(Vue) { if(install.installed) return components.map(component => Vue.component(component.name, component)) // Vue.prototype.$message = Message } export default { install, wzc_select, wzc_option, wzc_button, wzc_switch, wzc_collapse, wzc_collapse_item, wzc_color_picker, wzc_slider, wzc_timeline, wzc_timeline_option, wzc_dividingline, wzc_picview,}
复制代码

四、终端登录 npm 和发布 npm

在终端中输入npm login可以进行登录输入账号,密码,邮箱密码在输入时不会进行显示



发布 npm 时,使用npm publish进行发布


发布成功后,邮箱会默认接收到一份发布成功的邮件此时在你的 npm 仓库中可以看到发布的组件了


五、npm 修改

如果自己的组件有缺陷,想要修改,在修改后使用npm publish提交时不要忘记修改版本号,否则会发布失败


失败的发布


发布于: 2021 年 04 月 02 日阅读数: 29
用户头像

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者,在线水文 主要干前端的活,业余会学学python 欢迎各位关注,互相学习,互相进步

评论

发布
暂无评论
在npm发布自己的组件