在 npm 发布自己的组件

空城机

关注

发布于: 2021 年 04 月 02 日

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

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

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

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

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

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

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,}