从零开始发布你的第一个npm插件包并在多项目中使用

news2024/12/23 15:51:29

引言

        在开源的世界里，每个人都有机会成为贡献者，甚至是创新的引领者。您是否有过这样的想法：开发一个解决特定问题的小工具，让她成为其他开发者手中的利器？今天，我们就来一场实战训练，学习如何将你的代码打包成npm插件包，发布到全球最大的JS包管理平台–npm上。让全世界的其他开发者受益于你的智慧吧。
         我将自己编写的常用组件，工具模块，指令，常用的api库，框架等代码为了更好的复用，灵活的管理，上传到了npm库中进行了管理，更新，迭代。

准备工作

  1. 准备好node.js环境>>>>
  2. 创建一个干净的项目环境>>>>防止打包组件过程中受到其package.json的干扰 vue create 项目名称

步骤一、目录文件创建、组件写入、本地运行自测

一、 根据个人习惯，创建一个package文件，用于存放你的组件及其API方法。从零开始发布你的第一个npm插件包
目录介绍
从零开始发布你的第一个npm插件包并使用
二、封装一个简单组件demo,下面为基于elementUI封装的一个开关组件。

<template>
  <div class="custom-switch" @click="switchClick">
    <div :class="isCenter?'switch-box':''" v-loading="loading">
     开关 <el-switch class="switch-item" v-bind="$attrs"></el-switch>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "hsk-switch",
  props: {
    loading: {
      default: false,
      type: Boolean,
    },
    isCenter: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    switchClick() {
      // 如果禁用和loading状态，不emit给父组件
      if (this.$attrs.disabled || this.loading) {
        return;
      }
      this.$emit("switchClick", this.$attrs.value);
    },
  },
};
</script>
<style scoped>
.custom-switch{
  width: 40px;
}
.switch-box {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
</style>
<!-- <template>
  <div @click="switchClick">
    <el-switch
      v-model="localValue"
      :active-value="activeValue"
      :inactive-value="inactiveValue"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :disabled="disabled"
      @change="handleChange"
    ></el-switch>
  </div>
</template>

<script>
export default {
  name: "hsk-switch",
  props: {
    value: {
      type: [String, Number, Boolean],
      default: false,
    },
    activeValue: {
      type: [String, Number, Boolean],
      default: true,
    },
    inactiveValue: {
      type: [String, Number, Boolean],
      default: false,
    },
    activeColor: {
      type: String,
      default: "#13ce66",
    },
    inactiveColor: {
      type: String,
      default: "#ff4949",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      localValue: this.value,
    };
  },
  watch: {
    value: {
      handler(newVal) {
        this.localValue = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    switchClick(){
      this.$emit('switchlick', this.$attrs.value)
    },
    handleChange(newStatus) {
      // 当开关发生变化时，更新本地状态
      this.localValue = newStatus;
      this.$emit("change", this.localValue);
    },
  },
};
</script>

<style scoped>
/* 可以添加样式进行定制 */
</style> -->

三、封装好组件后，进行本地项目调用查看是否可以使用。

<template>
  <div>
    <HSKSwitch v-model="flg" :isCenter="false" @switchClick="handleStatusChange" :active-value="1"
        :inactive-value="0"></HSKSwitch>
  </div>
</template>

<script>
import HSKSwitch from "../package/hsk-switch/index.vue"
export default {
  name:"hskSwitch",
  components:{
    HSKSwitch
  },
  data(){
    return {
      flg:1,
    }
  },
  methods:{
    //开关
    handleStatusChange(){
      console.log("被执行了")
      // this.switchLoading = true
        // 这里就可以调用接口，接口成功后修改值和loading状态
        setTimeout(() => {
            this.flg = !this.flg ? 1 : 0
            // this.switchLoading = false
        }, 100)
    }
  }
}
</script>

<style>

</style>

本地项目调用预览效果：
从零开始发布你的第一个npm插件包并在多项目中使用

步骤二、组件封装好自测通过进行组件的批量导出

四、在package目录下创建一个index.js文件，用于注册或批量注册已封装好的组件和方法。
从零开始发布你的第一个npm插件包并在多项目中使用
代码

//package/index.js
import HskTable from "./hsk-table/index.vue"; // table组件
import HSKPagination from "./hsk-pagination/index.vue"; // table下的分页组件
import HSKSwitch from "./hsk-switch/index.vue"  //开关组件
import HSKDialog from "./hsk-dialog/index.vue"
import HSKSelect from './hsk-select/index.vue'
import HSKTreeSel from './hsk-treeSelect/index.vue'
import HSKTime from './hsk-time/index.vue'
import HSKAddressSel from './hsk-addressSel/index.vue'
// import * as hskMsgbox from "./pop-up.js"
const coms = [HskTable,HSKPagination,HSKSwitch,HSKDialog,HSKSelect,HSKTreeSel,HSKTime,HSKAddressSel]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  HskTable,
  HSKPagination,
  HSKSwitch,
  HSKDialog,
  // hskMsgbox,
  HSKSelect,
  HSKTreeSel,
  HSKTime,
  HSKAddressSel
};

步骤三、改造组件所在项目中的package.json文件，并执行打包

一、创建hskui打包存放文件夹，用于存放打包组件库存放的位置
从零开始发布你的第一个npm插件包并在多项目中使用

二、package.json配置打包命令

"hsk-ui": "vue-cli-service build --target lib ./src/package/index.js --name hskui --dest hskui"

参数说明：

– target lib : 关键字 指定打包的目录
– name : 打包后的文件名字
– dest : 打包后的文件夹的名称
从零开始发布你的第一个npm插件包并在多项目中使用

三、执行打包命令

  npm run hsk-ui

打包成功：
从零开始发布你的第一个npm插件包并在多项目中使用
从零开始发布你的第一个npm插件包并在多项目中使用

步骤四、新建需要上传文件夹并初始化package.json文件

一、新建一个自己需要上传组件包的文件夹(hskcomTest)，可在打包后存放一些其他打包不进去的文件。将执行打包命令生成的文件夹内容复制到hskcomTest文件夹中。进入hskcomTest 目录执行npm init -y,初始化一个package.json文件。

	npm init -y

初始化过后的文件：
在这里插入图片描述
参数说明

description : 组件包描述信息。
keywords : 字符串数组，便于用户在npm上搜索到我们的项目。
version : 项目版本号。
name : package.json文件中最重要的就是name和version字段，这两项是必填的。名称和版本一起构成一个标识符，该标识符被认为是完全唯一的。对包的更改应该与对版本的更改一起进行。name必须是字符串，不能以.或_开头，不能有大写字母，因为名称最终成为URL的一部分因此不能包含任何非URL安全字符。 npm官方建议我们不要使用与核心节点模块相同的名称。不要在名称中加js或node。如果需要可以使用engines来指定运行环境。
main : 项目文件入口文件，自动生成，不需要改动。

二、修改打打包上传地址dev，test，pre，prod环境上传地址，及其打包命令。在这里插入图片描述
三、配置好上传包的package.json后，进行将原打包的文件及打包不进来的文件复制放入到hskcomTest文件夹中
在这里插入图片描述

步骤五、添加登录后端人员给的npm私服账号和镜像地址

一、

npm login

从零开始发布你的第一个npm插件包并在多项目中使用

步骤六、发布

在组件打包后的文件夹中执行，进行上传组件或者你的插件包

npm publish --registry ”Nexus的镜像地址“

但是我当前已经在需上传的组件包中使用了如下配置
从零开始发布你的第一个npm插件包并在多项目中使用
所以我只需要执行npm run hsk-ui:dev命令即可

npm run hsk-ui:dev`

打包上传成功提示如下
从零开始发布你的第一个npm插件包并在多项目中使用
npm 私服上即可看到
从零开始发布你的第一个npm插件包并在多项目中使用

步骤七、安装并使用已发布包

一、安装
因为我是用的是私服的npm组件库，所以需要输入用户名和密码并指定url的地址,如果是公共服，那则不需要私服地址。

npm install -u 用户名 -p 密码 --registry=http://xxx.xxx.xx.xx:xxx/repository/npm-group-dev/ hsk-ui@1.0.1-SNAPSHOT

从零开始发布你的第一个npm插件包并在多项目中使用
二、安装完成后，main.js中全局引入。

//引入hsk组件
import hskui from "hsk-ui"
import "hsk-ui/styles/hskui.css"
//引入hsk方法
import { hskMsgbox } from 'hsk-ui/commonUtils'

三、页面中使用自己刚刚定义的组件

<hsk-switch></hsk-switch>

从零开始发布你的第一个npm插件包并在多项目中使用
效果：
从零开始发布你的第一个npm插件包并在多项目中使用

结语

        希望这篇指南能激发你发布自己npm插件包的热情，让编程之旅更加精彩！如果你有任何疑问或需要进一步的帮助，请随时留言，我们共同探讨。加油，未来的npm之星！🌟

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1793839.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多链路聚合设备在自然灾害应急能力提升工程基层防灾项目内的应用

多链路聚合设备在自然灾害应急能力提升工程基层防灾项目内的应用

在近几年信息技术的飞速发展&#xff0c;面对应急通信和指挥调度时需要移动化无线通信技术来做支撑&#xff0c;多链路聚合设备在中间的作用至关重要&#xff0c;实现从车到车、人到车、车到中心的多样化应用场景进行数据图像的无线传输和多节点组网方案需求&#xff0c;来满足…
阅读更多...
Linux[高级管理]——使用源码包编译安装Apache网站

Linux[高级管理]——使用源码包编译安装Apache网站

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f468;‍&#x1f4bb;Linux高级管理专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年5月31日14点20分 &#x1f004;️文章质量&#xff1a;96分 在Linux系统上编译和安装Apache HTTP Server是…
阅读更多...
乡村振兴与脱贫攻坚相结合：巩固拓展脱贫攻坚成果，推动乡村全面振兴，建设更加美好的乡村生活

乡村振兴与脱贫攻坚相结合：巩固拓展脱贫攻坚成果，推动乡村全面振兴，建设更加美好的乡村生活

目录 一、引言 二、巩固拓展脱贫攻坚成果 1、精准施策&#xff0c;确保稳定脱贫 2、强化政策支持&#xff0c;巩固脱贫成果 3、激发内生动力&#xff0c;促进持续发展 三、推动乡村全面振兴 1、加快产业发展&#xff0c;增强乡村经济实力 2、推进乡村治理体系和治理能力…
阅读更多...
2.6倍！WhaleTunnel 客户POC实景对弈DataX

2.6倍！WhaleTunnel 客户POC实景对弈DataX

作为阿里早期的开源产品&#xff0c;DataX是一款非常优秀的数据集成工具&#xff0c;普遍被用于多个数据源之间的批量同步&#xff0c;包括类似Apache DolphinScheduler的Task类型也对DataX进行了适配和增强&#xff0c;可以直接在DolphinScheduler里面利用通用的数据源调用Dat…
阅读更多...
Java面试——专业技能

Java面试——专业技能

优质博文&#xff1a;IT-BLOG-CN 一、简单讲下 Java 的跨平台原理 由于各个操作系统&#xff08;Windows&#xff0c;Linux等&#xff09;支持的指令集不是完全一致的。就会让我们程序在不同的操作系统上要执行不同的程序代码。Java 开发了适用于不同操作系统及位数的 Java 虚拟…
阅读更多...
Python对获取数据的举例说明

Python对获取数据的举例说明

当使用Python来获取数据时&#xff0c;有许多不同的方法和库可以根据你的需求来选择。以下是一些常见的示例&#xff0c;说明如何使用Python来从各种来源获取数据。 1. 从网站或API获取JSON数据 你可以使用requests库从网站或API获取JSON格式的数据。例如&#xff0c;从某个API…
阅读更多...
C++ | Leetcode C++题解之第128题最长连续序列

C++ | Leetcode C++题解之第128题最长连续序列

题目&#xff1a; 题解&#xff1a; class Solution { public:int longestConsecutive(vector<int>& nums) {unordered_set<int> num_set;for (const int& num : nums) {num_set.insert(num);}int longestStreak 0;for (const int& num : num_set) {…
阅读更多...
accelerate 笔记：对齐不同设备配置的性能

accelerate 笔记：对齐不同设备配置的性能

在TPU、多GPU和单GPU上使用accelerate运行相同的脚本和相同的batch_size&#xff0c;可能结果是不一样的那应该怎么做呢? 1 设置正确的种子 确保在所有分布式情况下使用 utils.set_seed() 完全设置种子&#xff0c;以使训练可复现 from accelerate.utils import set_seedse…
阅读更多...
【C++进阶】深入STL之string：模拟实现走进C++字符串的世界

【C++进阶】深入STL之string：模拟实现走进C++字符串的世界

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C模板入门 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀STL之string &#x1f4d2;1. string…
阅读更多...
男士什么牌子的内裤穿着舒服？五款实力派男士内裤分享

男士什么牌子的内裤穿着舒服？五款实力派男士内裤分享

你是否曾因为内裤不透气、材质不佳而倍感烦恼&#xff1f;男士内裤作为贴身衣物&#xff0c;其舒适度和质量至关重要。在如今市场上品牌众多、材质各异的背景下&#xff0c;如何挑选一款合适的男士内裤成为了一大难题。 以下是测评过的部分男士内裤&#xff1a; 近期&#xff…
阅读更多...
ArUco与AprilTag 标签

ArUco与AprilTag 标签

一、简介 在许多计算机视觉应用程序中&#xff0c;姿势估计非常重要&#xff1a;机器人导航&#xff0c;增强现实等等。 该过程基于发现真实环境中的点与其2d图像投影之间的对应关系。 这通常是一个困难的步骤&#xff0c;因此通常使用合成或基准标记来简化操作。 最受流行的…
阅读更多...
20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动

20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动

20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动 2024/6/6 9:48 【原文是在RK3328的Android7.1下写的。我将它升级成为RK3588的Android12了】 RK平台主要采用 FB 和 DRM 两种显示框架。与此相对应&#xff0c; HDMI 也有两套驱动。 FB&#xff1a; LINUX 3.10…
阅读更多...
技巧：合并ZIP分卷压缩包

技巧：合并ZIP分卷压缩包

如果ZIP压缩文件文件体积过大&#xff0c;大家可能会选择“分卷压缩”来压缩ZIP文件&#xff0c;那么&#xff0c;如何合并zip分卷压缩包呢&#xff1f;今天我们分享两个ZIP分卷压缩包合并的方法给大家。 方法一&#xff1a; 我们可以将分卷压缩包&#xff0c;通过解压的方式…
阅读更多...
【CentOS 7】挑战探索：在CentOS 7上实现Python 3.9的完美部署指南

【CentOS 7】挑战探索：在CentOS 7上实现Python 3.9的完美部署指南

【CentOS 7】挑战探索&#xff1a;在CentOS 7上实现Python 3.9的完美部署指南 大家好 我是寸铁&#x1f44a; 总结了一篇【CentOS 7】挑战探索&#xff1a;在CentOS 7上实现Python 3.9的完美部署指南详细步骤✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 此篇教程只适用于p…
阅读更多...
linux网络 dns域名解析

linux网络 dns域名解析

目录 DNS 域名体系结构 如何实现域名解析 正向解析 反向解析 主从服务器解析 bond 网卡 DNS 是域名系统的简称 域名和ip地址之间的映射关系 互联网中 IP地址是通信的唯一标识 逻辑地址 访问网站 域名 IP地址不好记 域名朗朗上口 好记 域名解析的目的就是为了实现 访…
阅读更多...
搭建高可用k8s

搭建高可用k8s

高可用只针对于api-server&#xff0c;需要用到nginx keepalived&#xff0c;nginx提供4层负载&#xff0c;keepalived提供vip(虚拟IP) 系统采用openEuler 22.03 LTS 1. 前期准备 因为机器内存只有16G&#xff0c;所有我采用3master 1node 1.1 修改主机配置&#xff08;所有节…
阅读更多...
fpga入门 串口定时1秒发送1字节

fpga入门 串口定时1秒发送1字节

一、 程序说明 FPGA通过串口定时发送数据&#xff0c;每秒发送1字节&#xff0c;数据不断自增 参考小梅哥教程 二、 uart_tx.v timescale 1ns / 1psmodule uart_tx(input wire sclk,input wire rst_n,output reg uart_tx);parameter …
阅读更多...
栈与队列的相互实现

栈与队列的相互实现

文章目录 前言一、用队列实现栈二、用栈实现队列总结 梦想不是别人给你的目标&#xff0c;靠自己的意志去实现的才是梦想… ——《食梦者》 前言 嗨喽喽&#xff01;大家好哇。欢迎小伙伴们来到我的博客&#xff01;&#xff01; 在前面已经分享了栈与队列两种数据结构的特点…
阅读更多...
进程和计划任务以及步骤

进程和计划任务以及步骤

进程 进程和程序有关&#xff0c;把该文件放到内存里&#xff0c;进程是动态的&#xff0c;不同时刻的状态不一样 内存&#xff1a;放置正在运行的程序和所需数据的位置 程序启动 ——》将相关文件和数据放到内存里 ——》进程&#xff08;processes&#xff09; 进程相关命令 …
阅读更多...
easyexcel动态表头导出

easyexcel动态表头导出

动态表头导出excel 红框固定&#xff0c;绿框动态 引入依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.1</version></dependency>工具类 import com.alibaba.excel.util…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023