记第一次发布npm包的过程

起因：公司项目多个项目中都需要针对树结构进行一些操作，为了避免代码重复在各个项目中复制粘贴（我不会说更大原因是为了在简历上添加内容），所以想把针对树结构操作的几个常用方法（过滤、查找指定元素和所有父级元素、树结构和数组互转）进行封装发布到npm上方便以后使用，经过一天研究最终成功发布，写篇文章记录下发布过程，也方便日后发布npm包碰到问题的时候方便查找流程。

具体发布流程可参考文章[，](超详细 如何发布自己的 npm 包超详细地介绍完整的npm发包流程：创建账号，创建npm包，发布npm包，使用npm包， - 掘金)本文只记录自己在按照此篇文章发布中遇到的问题。

1、执行 npm login 无法登录到 npm 上，经过排查原因为镜像源设置错误，需设置镜像源为 npm 官方源，不可使用淘宝镜像源
2、发布前本地测试问题
在编写好npm包需要的代码并成功发布到npm官方仓库后，我又萌生了一个想法，能不能将源代码使用webpack编译之后将编译的代码上传到npm仓库中，防止出现es5项目无法使用es6语法的问题，于是我在项目中安装了webpack、babel等工具开始了代码编译工作，webpack的具体配置可参考webpack官方文档，下面只展示个人项目中的配置文件

import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url)); // 模拟 CommonJS 的 __dirname

export default {
  // 入口文件
  entry: {
    index: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // 使用[name]来确保每个文件名不同
    library: {
      name: "xxx", // 替换为你的库名称
      type: "umd", // 支持多种模块化规范
    },
  },
  // 模块规则，例如使用 Babel 转换 ES6 代码
  module: {
    rules: [
      {
        test: /\.js$/, // 适用于所有 .js 文件
        exclude: /node_modules/, // 排除 node_modules
        use: {
          loader: "babel-loader", // 使用 Babel loader
          options: {
            presets: ["@babel/preset-env"], // Babel 配置
          },
        },
      },
    ],
  },
  mode: "production", // 使用生产模式，优化代码
  optimization: {
    minimize: false, // 禁用代码压缩
  },
};

package.json文件如下

{
  "name": "xxx",
  "version": "xxx", // 版本号
  "description": "xxx", // 描述
  "main": "dist/index.js", // npm包使用的主文件
  "files": [
    "dist" // 上传的文件夹
  ],
  "scripts": {
    "build": "webpack"
  },
  "author": "lizt12",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "xxx"  // git仓库地址
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "babel-loader": "^9.2.1",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  },
  "dependencies": {
    "core-js": "^3.39.0"
  },
  "type": "module"
}

在代码打包好后使用 npm link 将当前包注册到本地，新建项目使用 npm link xxx 引入本地包即可进行测试（我使用的是vue脚手架创建的项目，最初是自己新建了一个js文件，使用vscode里的live server插件进行查看，一直在报错，卡了我两个多小时，最后改用vue项目不再报错）
3、在打包发布之后我又萌生了一个想法，能不能做到类似于lodash库可以直接从某个模块引入方法（工具类提供了两个文件，一个是针对树结构的操作，一个是解决 加、减、乘、除 的精度问题），经过一度百度和gpt的帮助，最终使用webpack的多入口配置解决。（具体配置可参考webpack官网）

其他
npm unpublish 包名 版本号：可删除指定版本的npm包，但删除后需要24小时后才能继续发布该npm包（不清楚是不是因为我把所有版本全部删除了） npm view 包名：查看npm仓库上是否存在此包