如何从0到1开发自己的npm包

前言

创建一个项目，主要用于封装常用函数utils和校验函数validation，项目名称为npm-utils

注册一个npm账号

官网：www.npmjs.com/

初始化

npm init初始化，创建一个package.json包，package.json文件结构大概如下：

main：文件入口
name：项目名称
version：项目版本
author：作者

登录npm

npm login：登录npm

npm whoami：你是谁

更换npm镜像

由于外网访问限制，一般使用淘宝镜像，所以如果是使用淘宝镜像，需要更换到npm镜像

npm config get registry：检查镜像源

powershell 复制代码

# 换成淘宝镜像源
npm config set registry https://registry.npmmirror.com/

# 换成官方镜像源
npm config set registry https://registry.npmjs.org/

# 查看镜像源
npm get registry

这里不是使用淘宝镜像，所以不用重新设置镜像源。

注意：如果更换了镜像源，需要重新登录npm

上传包

npm publish：上传包，报错如下：

npm profile get --json：查看npm配置

原因：npm账户没有进行2fa验证

关于双重身份验证 | npm 中文网

需要在npm官网配置2FA，注意需要用【手机照相机】扫描二维码，即会验证成功

npm publish 还是报错：所以以上思路错误

注意：进行2fa验证之后，之后登录、上传都是2fa，默认使用2fa验证，禁用2fa验证可以使用---从命令行删除 2FA

经过搜索，发现403大概是以下几个原因：

电子邮件尚未验证，因此请先通过 npmjs.com 验证您的电子邮件
其他人正在使用相同的包名，因此它必须是唯一的。因此请选择一个唯一的名称。您可以在 package.json 文件下更改名称。
如果您要重新发布相同的软件包并进行更改，则需要更改版本，例如将 1.0.0 更改为 1.0.1。您也可以在 package.json 文件下更改版本名称。

参考链接：stackoverflow.com/questions/5...

于是修改package.json：将 name由npm-utils改为npm-utils123，将version由1.0.0改为1.0.1

最后成功了！！！

修改版本号

大概以下两个方法：

手动修改：package.json-->version
命令修改：
1. 大改：npm version major
2. 中改：npm version minor
3. 小改：npm version patch

暴露方法

你必须使用exports暴露你的方法，如下定义了一个npmTest的方法然后暴露出来，才能在安装这个包之后使用require引入

javascript 复制代码

exports.npmTest = (name) => {
  console.log(name)
}

从命令行删除 2FA

如果你在命令行上注销，请使用 npm login 命令登录。
在命令行上，键入以下命令：

npm profile disable-2fa

出现提示时，输入你的 npm 密码：

 npm password:

当系统提示你输入一次性密码时，请从你的身份验证器应用中输入密码：

Enter one-time password from your authenticator: 123456

使用npm包

安装使用

创建一个项目--useUtils
安装包---npm i npm-utils123

报错：npm ERR! Unsupported URL Type "link:": link:./src/types

原因：用了不同的包管理工具安装他，之前用的是pnpm install

解决办法：继续使用pnpm，pnpm i npm-utils123

参考链接：stackoverflow.com/questions/7...

安装成功之后，使用import导入部分函数，测试成功与否，这里我建的是一个vue项目，大概使用如下：

vue 复制代码

<script setup lang="ts">
  import { ref } from "vue";
  import { isObject,addAlpha,hexToRgb } from "npm-utils123"

  // 测试isObject函数
  let isObj=ref(isObject({}))

  // 测试颜色透明度
  let colorAlpha = ref(addAlpha("#ff0000", 0.5))

  // 测试hexToRgb函数
  let rgbObj = ref(hexToRgb("#ff0000"))

  defineProps<{ msg: string }>();

  const count = ref(0);
</script>

<template>
  <h1>npm-utils123包测试</h1>
  <div>isObj是一个函数嘛：{{ isObj }}</div>
  <div :style="{background:colorAlpha,padding:'40px'}">给红色增加0.5的透明度:{{ colorAlpha }}</div>
  <div>将红色hex转成rgb格式:{{ rgbObj }}</div>
</template>

  <style scoped>
  .read-the-docs {
  color: #888;
  }
</style>

效果：

杠杠的，安装使用成功啦！！！

本地调试

npm link：将npm包链接到项目中使用

进入本地包目录，执行npm link
进入本地项目目录：执行npm link npm-utils123

又报了之前类似的错，于是使用暴力解法，先删除node_modules，清空npm缓存，重新使用npm运行

链接成功啦！！！

踩坑记录

显示连接成功，但是实际上并不能联调

新建一个isArray，引入也报错，后面才知需要配置vite

参考连接：cn.vitejs.dev/config/shar...

vite.config.ts