从0开始搭建、上传npm包

news2025/1/25 9:01:49

从0开始搭建、上传npm包

  • 1、上传一个简单获取水果价格的包
    • 创建 `vite` 项目
    • 在项目根目录 `src` 文件夹中创建 `index.ts` 文件,文件内容如下:
    • 在 `main.ts` 文件中导入、导出上面创建的方法
    • 创建 `vite.config.ts` 配置文件,文件内容如下
    • 配置 `package.json` 文件,文件内容如下
    • 添加 `README.md` 项目说明文件
    • 打包项目
    • 注册 `npm` 账号
    • 项目中使用包
    • 修改 `npm` 包内容方法
  • 2、上传一个简单组件
    • 创建 `vite` 项目
    • 创建自定义组件
    • 创建对应 `index.ts` 文件,文件内容如下:
    • 配置 `vite.config.ts` 文件,文件内容如下:
    • 打包发布
    • 在页面中使用组件

1、上传一个简单获取水果价格的包

创建 vite 项目

npm create vite

在这里插入图片描述在这里插入图片描述在这里插入图片描述

在项目根目录 src 文件夹中创建 index.ts 文件,文件内容如下:

/**
 * 获取水果价格的方法
 * @param name 水果名称
 * @returns
 */
export const getPrice = (name: string) => {
  let price: number = 0.0;
  switch (name) {
    case "苹果":
      price = 9.99;
      break;
    case "香蕉":
      price = 7.89;
      break;
    case "梨":
      price = 6.65;
      break;
    case "榴莲":
      price = 9.65;
      break;
    case "菠萝":
      price = 5.42;
      break;

    default:
      throw new Error("未匹配到水果价格,请重新录入");
  }
  return price;
};

main.ts 文件中导入、导出上面创建的方法

import { getPrice } from "./index";

export { getPrice };

创建 vite.config.ts 配置文件,文件内容如下

import { defineConfig } from "vite";
export default defineConfig({
  build: {
    outDir: "dist", // 自定义构建输出目录
    target: "es2020",
    lib: {
      entry: "src/main.ts", // 入口文件路径
      formats: ["es", "cjs"],
    },
  },
});

配置 package.json 文件,文件内容如下

{
  "name": "bagen-getPrice",
  "private": false,
  "version": "1.0.1",
  "type": "module",
  "main": "dist/bagen-getPrice.cjs",
  "module": "dist/bagen-getPrice.js",
  "scripts": {
    "serve": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

添加 README.md 项目说明文件

打包项目

npm run build

注册 npm 账号

  • 官网
  • 配置 npm 源,在项目根目录中运行以下代码
npm config set registry https://registry.npmjs.org
  • 登录 npm

输入:姓名 和 邮箱

npm login
  • 发布
npm publish

在这里插入图片描述

项目中使用包

  • 安装包
npm install bagen-getPrice -S
  • 页面中使用
import { getPrice } from 'bagen-getPrice'

getPrice('苹果')

修改 npm 包内容方法

  • 安装包
npm install bagen-getPrice -S
  • 修改代码
  • 代码在 node_modules 文件夹中
  • package.json 文件中 更新版本号
  • 在自己包目录中运行如下代码:
npm publish

2、上传一个简单组件

创建 vite 项目

npm create vite

创建自定义组件

在这里插入图片描述

<template>
  <input type="text" v-model="keyword" @keydown.enter="searchPriceHandle" />
  <br />
  {{ keyword }} {{ price }}
</template>

<script setup lang="ts">
import { ref } from "vue";
const keyword = ref<string>("");
const price = ref<string | number>("");

/**
 * 查询价格方法
 */
const searchPriceHandle = () => {
  switch (keyword.value) {
    case "苹果":
      price.value = 9.98;
      break;
    case "香蕉":
      price.value = 8.88;
      break;
    case "菠萝":
      price.value = 6.48;
      break;
    case "梨":
      price.value = 9.78;
      break;
    default:
      price.value = 0.0;
      throw new Error("未匹配到水果名称,请重新输入");
  }
};
</script>

<style lang="scss" scoped></style>

创建对应 index.ts 文件,文件内容如下:

  • components ->index.ts
import { App } from "vue";
import custom from "./custom.vue";

const install = (app: App<Element>) => {
  app.component("Bg-Custom", custom);
};

export default {
  install,
};

配置 vite.config.ts 文件,文件内容如下:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: "dist", // 自定义构建输出目录
    target: "es2020",
    lib: {
      entry: "src/components/index.ts", // 入口哦文件路径
      name: "bg-get-price", // 暴漏的全局变量(最好把名称都统一)
      fileName: "bg-get-price", // 输出的包文件名,默认取 package.json 的 name
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

打包发布

打包发布过程同上

在页面中使用组件

  • 安装包
npm install bg-get-price -S
  • 注册,main.ts 文件中注册,代码如下:
import bgGetPrice from "bg-get-price";
// 注册,重点
app.use(bgGetPrice)
  • 引用
<bg-get-price></bg-get-price>

必须打包上传时候的名称一致
在这里插入图片描述

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

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

相关文章

npm 包管理工具

简介 Node官网&#xff1a;https://nodejs.org/ Npm官网&#xff1a;https://www.npmjs.com/ 在现代的软件开发世界中&#xff0c;包管理工具起着至关重要的作用。它们为开发者社区提供了一种高效共享和使用代码的方式。在 JavaScript 的范畴内&#xff0c;npm&#xff08;Node…

EMQX 性能调优:TCP SYN 队列与 Accept 队列

在上一篇博客&#xff08;EMQX 性能调优&#xff1a;最大连接与文件描述符&#xff09;&#xff0c;我们深入研究了 MQTT 连接与文件描述符之间的关系&#xff0c;介绍了如何修改文件描述符相关的内核参数来突破默认的最大连接数量限制。 但你可能会发现&#xff0c;在某些情况…

9.1斐波那契数(LC509-E)

算法&#xff1a; 动态规划五部曲&#xff1a; 1.确定dp数组及下标含义 dp[i]的定义为&#xff1a;第i个数的斐波那契数值是dp[i] 2.确定递归公式 题目已给出&#xff1a;状态转移方程 dp[i] dp[i - 1] dp[i - 2]; 3.dp数组如何初始化 题目已给 dp[0] 0; dp[1] 1; …

SpringBoot使用Rabbit详解含完整代码

1. 摘要 本文将详细介绍如何在Spring Boot应用程序中集成和使用RabbitMQ消息队列。RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;用于通过轻量级和可靠的消息在应用程序或系统之间进行异步通信。本文将通过步骤说明、代码示例和详细注释&#xff0c;指导读者在Spring…

2023年上-未来几年我要做什么

1月份&#xff0c;离职。 2月份&#xff0c;春节休假回来&#xff0c;中旬去参加了一个月的瑜伽培训&#xff0c;学会了倒立、鹤蝉。。。。 3月份&#xff0c;瑜伽培训结束&#xff0c;开始收拾房子&#xff0c;并调研各类项目。 4月份&#xff0c;参与了朋友的区块链项目 …

web前端开发--------阴影与转换

1.阴影分为文本阴影和盒子阴影 我们使用text-shadow属性为文本添加阴影效果&#xff0c;使用结构伪类为第一个子元素p添加阴影效果&#xff1b; 水平偏移量为负值时&#xff0c;表示阴影向左偏移&#xff1b; &#xfeff;垂直偏移量为负值时&#xff0c;表示阴影向上偏移。 …

【Linux】初始进程地址空间

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 目录 一、再谈fork二、程序地址空间2.1代码验证 三、虚拟地址&am…

Error: Projects must list all files or use an ‘include‘ pattern.

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

【解决方案】在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译

SpaceChart/Translate SpaceChart/Translate 是一个可配置的翻译插件&#xff0c;适用于任何环境&#xff0c;让开发者不再需要注重插件本身&#xff1b;插件支持自定义翻译引擎&#xff0c;快速生成对应的AI翻译模型客户端插件 Repository GitHubNPM Browser Support La…

计算机图形学 实验

题目要求 1.1 实验一&#xff1a;图元的生成&#xff1a;直线、圆椭区域填充 你需要完成基本的图元生成算法&#xff0c;包括直线和椭圆。 在区域填充中&#xff0c;要求你对一个封闭图形进行填充。你需要绘制一个封 闭图形&#xff08;例如多边形&#xff09;&#xff0c;并选…

计算机网络实验一

目录 实验一 使用PacketTracer组建简单局域网 1、实验目的 2、实验设备 &#xff08;1&#xff09;内容一&#xff08;组建简单局域网&#xff09;&#xff1a; &#xff08;2&#xff09;内容二&#xff08;使用交叉线直连两台机器&#xff09;&#xff1a; &#xff08…

Java知识点总结

数据类型强转&#xff1a;byte short int long float double &#xff1b; 数组定义 [ ]数组名 clone-复制数组equals-比较存储地址 toString sort-排序 length-长度 arraycopy([]a,s,[]b,ss,n)-数组复制 运算符及语句 instanceof双目运算符 –左对象右类 判断是否是该类创建…

【Linux】-多线程的知识都收尾(线程池,封装的线程,单例模式,自旋锁)

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

Unity使用反向遮罩实现镂空shader

实现步骤&#xff1a; 1&#xff0c;创建两个材质球&#xff0c;遮罩层的属性如下&#xff1a; 被遮罩层的属性如下&#xff1a; 2&#xff0c;使用两张image&#xff0c;遮罩层在父节点&#xff0c;被遮罩层在子节点&#xff0c;然后分别添加材质球与镂空图片 实现效果如下&a…

无人零售模式下,“IoT+鸿蒙”实现零代码搭建自动售货机监控大屏的可能性摸索

前言 新零售模式下&#xff0c;对loT的探索与应用还在继续。 而数字时代&#xff0c;数字化转型在零售行业中蔓延&#xff0c;而对于新的消费方式的探索&#xff0c;也在如火如荼的进行中。于是&#xff0c;一种新零售的形式——无人零售逐渐形成概念。 如果说&#xff0c;人…

D78XX系列——用于各种电视机、收录机、电子仪器、设备的稳压电源电路,输出电流大,内设过热、短路保护电路,无需外接元件

D78XX系列是用于各种电视机、收录机、电子仪器、设备的稳压电源电路。包括D7805、D7806、 D7808、 D7809、 D7810、 D7812、 D7815。 主要特点&#xff1a; ● 输出电流大&#xff0c;IOMAX 1A. ● 无需外接元件。 ● 内设过热、短路保护电路 ● 封装形式: T0-220

Cmake语法学习2:常用变量

目录 1.常用变量简介 1.1提供信息的变量 1.2改变行为的变量 1.3描述系统的变量 ​编辑1.4控制编译的变量 2.提供信息的变量 2.1PROJECT_SOURCE_DIR 和 PROJECT_BINARY_DIR 2.2 CMAKE_SOURCE_DIR 和 CMAKE_BINARY_DIR 2.3CMAKE_CURRENT_SOURCE_DIR 和CMAKE_CURRENT_BIN…

如何用AI人工智能写作?6个AI写作神器推荐

在日常生活中&#xff0c;我们往往会遇到一些关于写作方面的难题&#xff0c;毕竟传统的写作方式还是会存在一些局限性&#xff0c;幸运的是&#xff0c;随着人工智能技术的不断发展&#xff0c;AI写作已经成为了现实。AI写作神器可以帮助我们提高写作效率&#xff0c;解决写作…

骨传导耳机的技术原理是什么?和传统耳机相比有哪些优点?

骨传导耳机通过人体骨骼来传递声音&#xff0c;可以绕过耳道和耳膜直接传达音频到听者的内耳&#xff0c;开放双耳的佩戴方式可以在享受音乐或通话的同时保持对周围环境的感知&#xff0c;这种设计在户外活动或运动等场景下的使用尤为实用&#xff0c;可以避免堵塞耳朵&#xf…

RK3568驱动指南|驱动基础进阶篇-进阶1 编译进内核的驱动系统是如何运行的?

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…