如何将 ReactJS 组件发布到 NPM ？

按照这些简单的步骤将您自己的 ReactJS 组件发布到 NPM。

第 1 步：初始设置

为了将任何 ReactJS 组件发布到 npm（节点包管理器），首先我们必须在 React 应用程序中创建一个 React 组件。以下是创建任何 React 应用程序的说明。

• 使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

• 创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

第 2 步：创建组件

在您的代码编辑器中打开您的项目文件夹，您将看到许多文件夹，根据您的选择创建一个名为components 的文件夹，就像在我们的例子中，我们在src文件夹中创建了文件夹，如下所示。

然后转到您创建的文件夹并创建您的 ReactJs 组件，就像在您的情况下，我们使用名为Header.js的 react-bootstrap 创建了一个导航栏组件。

Header.js

import React from "react";
import {
    Nav,
    Navbar,
    NavDropdown,
    Form,
    FormControl,
    Button,
} from "react-bootstrap";
  
const Header = () => {
    return (
        <>
            
                
                    ReactNavbarComponent
                
                
                
                    

                        Home
                        Link
                        
                            
                                Action
                            
                            
                                Another action
                            
                            
                                Something
                            
                            
                            
                                Separated link
                            
                        
                    
                    

                        
                        
                            Search
                        
                    
                
            
        
    );
};
  
export default Header;

第 3 步：发布环境设置

使用终端转到components文件夹并输入npm init 。您将在命令行中看到以下内容。

Use `npm install ` afterward to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (components) react-navbar
version: (1.0.0)
description: React-navbar
entry point: (Header.js)                      # Entry Point publishing
test command:
git repository:
keywords:
author: 
license: (ISC)
About to write to C:\Users\Desktop\Tcw\app\src\components\package.json:
{
  "name": "react-navbar",
  "version": "1.0.0",
  "description": "React-navbar",
  "main": "Header.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

将组件所需的所有依赖项安装为对等依赖项。首先，您必须转到终端并键入以下命令：

npm install (your dependences name)

对于我们的示例，我们必须使用以下命令为我们的组件安装这两个依赖项：

npm install react
npm install react-bootstrap

现在转到package.json文件并将依赖项更改为对等依赖项并从组件文件夹中删除node_module文件夹。

现在，如果您编写 npm install 您的终端，您将看到以下说明：

npm WARN react-navbar@1.0.0 requires a peer of react@^17.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-navbar@1.0.0 requires a peer of react-bootstrap@^1.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-navbar@1.0.0 No repository field.

up to date in 3.59s
found 0 vulnerabilities

第 4 步：发布到 npm

转到 npm 网站并使用您的邮件 ID 和密码创建一个帐户。确保您位于组件目录的当前目录中并键入以下命令：

npm login 
# Use your username and password what you have created in the npm website
# Then run this command
npm publish

现在您的 ReactJs 组件已成功发布到 npm。转到您的 npm 帐户，在那里您可以看到您的包，如下所示。