React 个人组件库项目在npm上的发布方法

2023-11-27 11:04:58

React 个人组件库项目在npm上的发布

1. 创建NPM账号

在发布之前，您需要创建一个NPM账号。如果您还没有，请访问NPM官网进行注册。

2. 创建项目

创建一个名为my-react-component-library的文件夹，并进入该文件夹。

mkdir my-react-component-library
cd my-react-component-library

3. 初始化项目

在文件夹中运行以下命令初始化项目：

npm init -y

4. 安装依赖项

安装必要的依赖项：

npm install react react-dom

5. 创建组件库

在src文件夹中创建一个名为components的文件夹，并在其中创建第一个组件。例如，创建一个名为Button的组件：

import React from 'react';

const Button = (props) => {
  return (
    <button onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;

6. 创建package.json文件

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

{
  "name": "my-react-component-library",
  "version": "1.0.0",
  "description": "My personal React component library",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

7. 构建项目

运行以下命令构建项目：

npm run build

8. 发布项目

运行以下命令发布项目：

npm publish

9. 配置个人主页

使用Gitee pages配置个人主页。如果您还没有Gitee账号，请访问Gitee官网进行注册。

将项目发布到npm后，您需要在项目根目录下创建一个名为docs的文件夹，并在其中创建一个名为index.html的文件。在index.html文件中添加以下内容：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>My React Component Library</h1>
    <p>This is my personal React component library.</p>
  </body>
</html>