【npm】如何发布到npm

前言

本文讲解如何将 ReactHook 或 JS函数 发布到npm，案例采用另一篇文章：React如何监听LocalStorage的变化。

至于如何发布vite插件可以查看另一篇文章：如何将开发的vite插件发布到npm。

一、创建本地项目

1. 初始化项目

生成项目目录并且初始化package.json

npm init -y
1

2. 编写主要内容

在 src 目录下创建插件文件 index.js，并书写逻辑。

import { useEffect } from "react"

function safeParse(jsonString) {
  if (jsonString === null) {
    return null
  }
  try {
    return JSON.parse(jsonString)
  } catch (error) {
    console.error("Error parsing JSON:", error)
    return null
  }
}

function useLocalStorageListener(localStorageKey, callback) {
  useEffect(() => {
    const originalSetItem = localStorage.setItem
    localStorage.setItem = function (key, newValue) {
      const setItemEvent = new CustomEvent("setItemEvent", {
        detail: { key, newValue },
      })
      window.dispatchEvent(setItemEvent)
      originalSetItem.apply(this, [key, newValue])
    }

    const handleSetItemEvent = (event) => {
      const customEvent = event
      if (event.detail.key === localStorageKey) {
        // 这里的key就是本地存储对应的key
        const updatedValue = safeParse(customEvent.detail.newValue)
        callback(updatedValue) // 将本地存储最新的值传给回调函数
      }
    }

    window.addEventListener("setItemEvent", handleSetItemEvent)

    return () => {
      window.removeEventListener("setItemEvent", handleSetItemEvent)
      localStorage.setItem = originalSetItem
    }
  }, [localStorageKey, callback])
}

export default useLocalStorageListener
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

3. 配置打包工具

使用 babel 或 tsc 来编译代码。如果是纯 JavaScript 项目，可以使用 babel 进行编译。

安装 babel 及其相关依赖：

npm install --save-dev @babel/cli @babel/preset-env @babel/preset-react @babel/core
1

然后，在项目根目录下创建一个名为 .babelrc 的文件，并添加以下内容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
1
2
3

在 package.json 文件中，添加一个 build 脚本来编译代码：

{
  "scripts": {
    "build": "babel src --out-dir lib"
  }
}
1
2
3
4
5

编译代码：

npm run build
1

4. 发布

确保登录了 npm：

npm login
1

登录后，运行以下命令将包发布到 npm：

npm publish --access public
1

注意

• package.json中的name就是包名
• package.json中name不能含有大写字母、中文字符、特殊字符等
• 如果npm使用了如淘宝镜像等，需要切回官方地址

npm config set registry https://registry.npmjs.org/
1