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

引言

        在开源的世界里，每个人都有机会成为贡献者，甚至是创新的引领者。您是否有过这样的想法：开发一个解决特定问题的小工具，让她成为其他开发者手中的利器？今天，我们就来一场实战训练，学习如何将你的代码打包成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之星！🌟

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

交易者要敢于“自我隔离”，建立自己和市场的“防火墙”

交易者要敢于“自我隔离”，建立自己和市场的“防火墙”

交易技巧与知识是可学习的&#xff0c;市场经验也是可积累的&#xff0c;但更需要形成成熟的心理&#xff0c;并且快速付诸实际行动&#xff0c;而这种行动是一个漫长的实践&#xff0c;追求和感悟的过程。 作为交易员每天面临着大量的胜败&#xff0c;责任重大、压力巨大。理性…
阅读更多...
大模型学习之菜鸟的进阶道路

大模型学习之菜鸟的进阶道路

在我学习大模型之前&#xff0c;我一直是一个java哥&#xff0c;现在学习了大模型&#xff0c;我看视频学习&#xff0c;就只知道一个base llm&#xff0c;还有一个是instruction tuned llm&#xff0c;我理解了这些词汇的意义&#xff0c;然后进入了正式学习&#xff0c;那我们…
阅读更多...
【Qt】 new成功，但是没有进入到构造函数。

【Qt】 new成功，但是没有进入到构造函数。

NameTest工程中 nametest.cpp NameTest::NameTest() {pdata new privateAB; }NameTest::~NameTest() {if (pdata){privateAB *p (privateAB *)pData; //void *pdata nullptr;delete p;pdata nullptr;} }内部类&#xff1a; privateAB #include "private.h"#i…
阅读更多...
vs2015Professional英文版和中文版的安装教程（附安装包）

vs2015Professional英文版和中文版的安装教程（附安装包）

英文版 下载安装包 1、Visual Studio 2015 With Update 3 Community 32位64位英文社区版下载地址&#xff1a; http://download.microsoft.com/download/b/e/d/bedddfc4-55f4-4748-90a8-ffe38a40e89f/vs2015.3.com_enu.iso 镜像名称&#xff1a;en_visual_studio_community_…
阅读更多...
图片像素缩放，支持个性化自定义与精准比例调整，让图像处理更轻松便捷！

图片像素缩放，支持个性化自定义与精准比例调整，让图像处理更轻松便捷！

图片已经成为我们生活中不可或缺的一部分。无论是社交媒体的分享&#xff0c;还是工作文档的编辑&#xff0c;图片都扮演着至关重要的角色。然而&#xff0c;你是否曾经遇到过这样的问题&#xff1a;一张高清大图在上传时却受限于平台的大小要求&#xff0c;或者一张小图需要放…
阅读更多...
Python用于简化数据操作和分析工作库之DaPy使用详解

Python用于简化数据操作和分析工作库之DaPy使用详解

概要 在数据科学和机器学习领域，处理和分析数据是关键的一步。Python 的 DaPy 库提供了一组强大的工具，用于简化数据操作和分析工作。DaPy 旨在提供高效且直观的 API，使得数据处理变得更加便捷。本文将详细介绍 DaPy 库，包括其安装方法、主要特性、基本和高级功能，以及实…
阅读更多...
【MMdetection】2.自定义数据训练

【MMdetection】2.自定义数据训练

1.废话 因为MMdetection里面提供了非常多的模型和配置文件供我们选择，这样做对比实验非常方便。 在标准数据集上训练预定义的模型 — MMDetection 3.3.0 文档 官方文档在此。 openMMlab提供了各种经典网络和配置文件系统使得MMdetection的上手难度有一点，不熟悉官方常规操…
阅读更多...
AI绘画入门基础之描述关键词（提示词）需要遵循什么逻辑？

AI绘画入门基础之描述关键词（提示词）需要遵循什么逻辑？

简单来说总结为一句话&#xff1a;就是告诉AI&#xff0c;你要画什么东西&#xff0c;东西长什么样&#xff0c;用什么画法绘画。 1. 概念性与详细性&#xff1a; 使用这么多AI绘画工具创作图片以来&#xff0c;其实有时候根据一些中文概念词语也能生成一些不错的画风图片&a…
阅读更多...
python篮球队员招募 2024年3月青少年编程电子学会python编程等级考试二级真题解析

python篮球队员招募 2024年3月青少年编程电子学会python编程等级考试二级真题解析

目录 python篮球队员招募 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python篮球队员招募 2024年3月 python编程等级考试级编程题 一、题目…
阅读更多...
ultralytics solutions快速解决方案，快速实现某些场景的图像解决方案

ultralytics solutions快速解决方案，快速实现某些场景的图像解决方案

参考： https://docs.ultralytics.com/solutions/ 在不断更新，已经有一些场景的解决方案 ultralytics 8.2.27 一、区域统计 1、自定义区域统计数量 https://docs.ultralytics.com/guides/region-counting/ 1、自定义画框，比如矩形框四个点的坐标获取 通过cv2点击图片获…
阅读更多...
人工智能_机器学习097_PCA数据降维算法_数据去中心化_特征值_特征向量_EVD特征值分解原来和代码实现---人工智能工作笔记0222

人工智能_机器学习097_PCA数据降维算法_数据去中心化_特征值_特征向量_EVD特征值分解原来和代码实现---人工智能工作笔记0222

降维算法的原理,一会咱们再看,现在先看一下,算法 可以看到PCA算法的,原理和过程,我们先看一下代码 为了说明PCA原理,这里,我们,先来计算一下X的方差,可以看到 先把数据进行去中心化,也就是用数据,减去数据的平均值. B = X-X.mean(axis=0) 这段代码是用于计算矩阵X的每一列减去该…
阅读更多...
Dell戴尔XPS 16 9640 Intel酷睿Ultra9处理器笔记本电脑原装出厂Windows11系统包，恢复原厂开箱状态oem预装系统

Dell戴尔XPS 16 9640 Intel酷睿Ultra9处理器笔记本电脑原装出厂Windows11系统包，恢复原厂开箱状态oem预装系统

下载链接&#xff1a;https://pan.baidu.com/s/1j_sc8FW5x-ZreNrqvRhjmg?pwd5gk6 提取码&#xff1a;5gk6 戴尔原装系统自带网卡、显卡、声卡、蓝牙等所有硬件驱动、出厂主题壁纸、系统属性专属联机支持标志、系统属性专属LOGO标志、Office办公软件、MyDell、迈克菲等预装软…
阅读更多...
【UE5.1 角色练习】11-坐骑——Part1（控制大象移动）

【UE5.1 角色练习】11-坐骑——Part1（控制大象移动）

前言 在上一篇&#xff08;【UE5.1 角色练习】10-物体抬升、抛出技能 - part2&#xff09;基础上创建一个新的大象坐骑角色&#xff0c;并实现控制该角色行走的功能。 效果 步骤 1. 在商城中下载“African Animal Pack”资产和“ANIMAL VARIETY PACK”资产导入工程中 2. 复…
阅读更多...
python-opencv图像分割

python-opencv图像分割

文章目录 二值化图像骨骼连通域分割 二值化 所谓图像分割&#xff0c;就是将图像的目标和背景分离开来&#xff0c;更直观一点&#xff0c;就是把目标涂成白色&#xff0c;背景涂成黑色&#xff0c;言尽于此&#xff0c;是不是恍然大悟&#xff1a;这不就是二值化么&#xff1…
阅读更多...
Linux进程替换 自主shell程序

Linux进程替换 自主shell程序

本篇将要讲解有关进程中最后一个知识点——进程替换&#xff0c;其中主要介绍有关进程替换的六个函数&#xff0c;直接从函数层面来理解进程替换&#xff08;在使用函数的过程中&#xff0c;也会对进行替换进行解释&#xff09;。本篇主要围绕如下的进程替换函数&#xff1a; 以…
阅读更多...
【全开源】考试答题系统源码（FastAdmin+ThinkPHP+Uniapp）

【全开源】考试答题系统源码（FastAdmin+ThinkPHP+Uniapp）

一款基于FastAdminThinkPHPUniapp开发的小程序答题考试系统&#xff0c;提供全部前后台无加密源代码&#xff0c;支持私有化部署。 &#x1f4dd;考试答题系统&#xff1a;便捷高效的学习新选择&#x1f4a1; &#x1f4da; 考试答题系统是什么&#xff1f; 考试答题系统&…
阅读更多...
windows下visual studio 2019 c++代码混淆

windows下visual studio 2019 c++代码混淆

环境&#xff1a;windows,visual studio 2019,cmake 目的&#xff1a;c代码混淆 一 IDE安装clang平台工具集 1&#xff1a;打开visual studio Installer 2.点击已安装下的 修改 ->单个组件&#xff0c;搜索框中输入"clang",勾选&#xff0c;然后点击安装。&…
阅读更多...
SSM框架整合，内嵌Tomcat。基于注解的方式集成

SSM框架整合，内嵌Tomcat。基于注解的方式集成

介绍&#xff1a; SSM相信大家都不陌生&#xff0c;在spring boot出现之前&#xff0c;SSM一直是Java在web开发中的老大哥。现在虽说有了spring boot能自动整合第三方框架了&#xff0c;但是现在市面上任然有很多老项目是基于SSM技术的。因此&#xff0c;能熟练掌握SSM进行开发…
阅读更多...
图与矢量 RAG — 基准测试、优化手段和财务分析示例

图与矢量 RAG — 基准测试、优化手段和财务分析示例

图与矢量 RAG — 基准测试、优化手段和财务分析示例 Neo4j 和 WhyHow.AI 团队探索了图和矢量搜索系统如何协同工作以改进检索增强生成 &#xff08;RAG&#xff09; 系统。使用财务报告 RAG 示例&#xff0c;我们探索了图和矢量搜索之间的响应差异&#xff0c;对两种类型的答案…
阅读更多...
C# 反射类Assembly 程序集（Assembly）用法

C# 反射类Assembly 程序集（Assembly）用法

常见的两种程序集&#xff1a; 可执行文件&#xff08;.exe文件&#xff09;和 类库文件&#xff08;.dll文件&#xff09;。 在VS开发环境中&#xff0c;一个解决方案可以包含多个项目&#xff0c;而每个项目就是一个程序集。 他们之间是一种从属关系&#xff0c;也就是说&…
阅读更多...
最新文章

Copyright @ 2022~2023