前言
本文讲解如何将 ReactHook
或 JS函数
发布到npm,案例采用另一篇文章:React如何监听LocalStorage的变化。
至于如何发布vite插件可以查看另一篇文章:如何将开发的vite插件发布到npm。
一、创建本地项目
1. 初始化项目
生成项目目录并且初始化package.json
npm init -y
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
3. 配置打包工具
使用 babel 或 tsc 来编译代码。如果是纯 JavaScript 项目,可以使用 babel 进行编译。
安装 babel 及其相关依赖:
npm install --save-dev @babel/cli @babel/preset-env @babel/preset-react @babel/core
然后,在项目根目录下创建一个名为 .babelrc
的文件,并添加以下内容:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
在 package.json
文件中,添加一个 build
脚本来编译代码:
{
"scripts": {
"build": "babel src --out-dir lib"
}
}
编译代码:
npm run build
4. 发布
确保登录了 npm:
npm login
登录后,运行以下命令将包发布到 npm:
npm publish --access public
注意
package.json
中的name就是包名package.json
中name不能含有大写字母、中文字符、特殊字符等- 如果npm使用了如淘宝镜像等,需要切回官方地址
npm config set registry https://registry.npmjs.org/