發布 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 不是很好 :)