菜单 搜索
首页 前端知识 从零开始发布你的第一个npm插件包并在多项目中使用

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

2024-06-16 01:06:05 前端知识 前端哥 20 182 我要收藏

引言

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12275.html
标签
vue3
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

前端——12.表单标签

2024-06-21 00:06:57

src、href和url含义及区别

2024-06-21 00:06:56

CSS知识点大全

2024-06-21 00:06:16

基于HTML5的酒店主页网站(源码 开题)

2024-06-21 00:06:04

构建响应式网站的HTML5和CSS3最新技术

2024-06-21 00:06:03

JS垃圾回收机制（GC）

2024-06-21 00:06:03

Web前端最新HTML5(三)——Web 本地存储，2024年最新腾讯三面到hr面

2024-06-21 00:06:57

96道前端面试题 前端常用算法(1)，html前端技术开发

2024-06-21 00:06:49

html中表格table的内容水平和垂直居中显示_html中怎么让table垂直居中

2024-06-21 00:06:41

2024年前端最新【面试题】常见前端基础面试题（HTML,CSS,JS）_后端js和html面试，中高级前端面试中你不得不会的知识点

2024-06-21 00:06:34

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！