发布 React 组件到 NPM

Question

这是我第一次发布到 NPM。我有一个 React 菜单组件，我使用这种方法发布了它。 这是我的文件夹结构，我要发布的所有内容都在 lib 文件夹中。 发布后，我在另一个 React 项目中安装并试用了它。 我已经导入，它位于 node_modules 文件夹中，如屏幕截图所示，但它给出了Module not found: Error: Can't resolve 'react-burger-navmenu' in 'C:\Users\yanke\OneDrive\Рабочий стол\burger-test\src'

package.json

{
  "name": "react-burger-navmenu",
  "version": "1.0.0",
  "description": "Simple menu component for React",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Saidamir-Sh/react-burger-navmenu.git"
  },
  "keywords": [
    "[\"menu\"",
    "\"react\"",
    "\"ui\"]"
  ],
  "author": "Saidamir",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Saidamir-Sh/react-burger-navmenu/issues"
  },
  "homepage": "https://github.com/Saidamir-Sh/react-burger-navmenu#readme",
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "dependencies": {
    "bootstrap": "^4.6.0",
    "react-bootstrap": "^1.6.4"
  }
}

菜单.tsx

import React, { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import './styles/_index.scss'

interface Props {
    children?: JSX.Element|JSX.Element[]
    className?: string
    position?: string
}

const Menu = (props: Props) => {

    // show hide sidebar
    const [isActive, setIsActive] = useState<boolean>(false)

    // collapse side bar
    const ToggleMenu = () => {
    setIsActive(!isActive)
    }

  return (
      <>
       <div onClick={ToggleMenu} className={isActive ? `hamburger hamburger-${props.position}  is-active` : `hamburger hamburger-${props.position}`} id="hamburger-3">
            <span className="line"></span>
            <span className="line"></span>
            <span className="line"></span>
            </div>
        <section id={!isActive ? 'menu' : 'menu-active'} className={`${props.className} ${props.position}`}>
            {props.children}
        </section>
      </>
    )
}

Menu.Header = (props: Props) => <header className={props.className}>{props.children}</header>;
Menu.Body = (props: Props) => <main className={props.className}>{props.children}</main>;
Menu.Footer = (props: Props) => <footer className={props.className}>{props.children}</footer>;

export default Menu

索引.tsx

import Menu from "./components/Menu";

export default Menu

---

Answer 1

1. 在路径中去掉西里尔字母和空格（可能不是问题，但没有它们会更好）；
2. 在您的package.json中，入口点必须不同。 根据您提供的链接：您需要类似"main":"Menu.js"的东西；
3. 在您的问题中添加“typescript”、“react-tsx”和其他一些更相关的标签；
4. 您的dependencies项必须 go 到peerDependencies 。
5. 尝试手动将模块文件复制到测试目录中。 我为此运行了一个 shell 脚本（注意：您可能需要自己编辑脚本）：

clear && cd && cd Documents/Repos/random-people && cp -r lib index.js package.json ~/Documents/Repos/test-directory/node_modules/randomized-people && cd && cd Documents/Repos/test-directory && node index.js

我将解释它的作用：清除终端，将目录更改为主目录，将目录更改为我本地的 npm package 文件，将它们复制到测试目录的node_modules中，将目录更改为测试目录并运行 js 文件。

PS：我可能漏掉了一些东西，我对 TS 不是很好 :)