如何在NPM上发布自己的React组件(包)

JiaLin_Denny2025-08-02 2:37

我们在项目中都写过一些可以公用的功能，今天小编教会大家，如何将这些公共的功能或组件进行封装、打包并发布在npm上去，使之成为一个可以供更多开发者使用的npm包。

第一步：创建项目

javascript 复制代码 
mkdir rc-checkbox-virtual-list 
创建一个文件夹，我的叫做rc-checkbox-virtual-list，你可以根据你自己来

cd rc-checkbox-virtual-list 
进入创建好的rc-checkbox-virtual-list文件夹中

npm init或npm init -y
这里主要是初始化一些基本信息
使用npm init -y是默认生成相关信息
使用npm init 需要你手动输入相关信息

最后生成一个package.json文件，大致如下：

javascript 复制代码 
{
  "name": "rc-checkbox-virtual-list",
  "version": "1.0.0",
  "description": "a react component",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [
    "react",
    "checkbox",
    "list"
  ],
  "author": "luanjialin",
  "license": "ISC"
}

第二步：创建相关目录结构

javascript 复制代码 
在项目根目录下手动创建 src、lib、test文件夹
src： 用来存放源代码
lib： 用来存放编译后的代码，这个目录只读
test：用来存放测试代码目录

第三步：编写组件

javascript 复制代码 
在新建src目录中，我自己创建了一个RcCheckBoxList文件夹
里面写了一个RcCheckBoxList.js文件和RcCheckBoxList.css文件
同时在src下，我创建了一个index.js文件，用来引用并导出RcCheckBoxList.js


你可以根据自己的组件实际情况来编写
下面是我的代码


src/RcCheckBoxList/RcCheckBoxList.js文件
import React ,{ useState ,useEffect} from 'react';
import {Checkbox} from 'antd';
import './RcCheckBoxList.css';
import 'antd/dist/antd.css';

function RcCheckBoxList(props)  {
  const [isCheckAll, setisCheckAll] = useState(false)
  const [addmanList,setaddmanList]=useState([]);
  const [xingmingList,setxingmingList]=useState([...props.dataSource]);

  useEffect(()=>{
    // 这里判断翻页新传递的数据和选中的数据是否存在...
    console.log('addmanList',addmanList);
    setisCheckAll(false);
    let data=[...props.dataSource];
    let num=0;
    let addmanlist=addmanList;
    data.forEach(item => {
      let matched = addmanlist.find(obj => obj.id === item.id);
      if (matched){
        item.checked=true;
        num+=1;
      }        
    });
    if(num==data.length){
      setisCheckAll(true);
    }
    setxingmingList([...data]);
  },[props.dataSource])

  function onCheckChange(e,item){
    let ischecked=e.target.checked;
    let selectId=item.id;
    let num=0;
    let xingminglist=xingmingList;
    xingminglist.map((item,index)=>{
      if(item.id==selectId){
        item.checked=ischecked;
        if(item.checked==true){
          setaddmanList(prev=>[...prev,item]);
          props.check([...addmanList,item]);
        }else{
          let array=addmanList.filter(i=>i.id!==selectId);
          setaddmanList([...array]);
          props.check([...array]);
        }
      }
    })
    setxingmingList([...xingminglist]);
    xingminglist.map((item,index)=>{
      if(item.checked==true){
        num+=1;
      }
    })
    if(num==xingminglist.length){
      setisCheckAll(true);
    }else{
      setisCheckAll(false);
    }    
  };

  function onCheckAllChange(e){
    let ischecked=e.target.checked;
    setisCheckAll(ischecked);
    let addmanlist=addmanList;
    let xingminglist=xingmingList;
    xingminglist.map((item,index)=>{
      item.checked=ischecked;
    })
    if(ischecked==true){
      let array = [...new Set([...xingminglist,...addmanlist].map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
      setaddmanList(array);
      props.allcheck(array);
    }else{
      let array = addmanlist.filter(itemA => !xingminglist.some(itemB => itemA.id === itemB.id));
      setaddmanList(array);
      props.allcheck(array);
    }

  };

  return (

      <div className="alarmNotice2_draw_top_body">
        <div className="alarmNotice2_draw_top_body_header">
          <div className="alarmNotice2_draw_top_body_header_left"><Checkbox onChange={onCheckAllChange} checked={isCheckAll}></Checkbox><div className="alarmNotice2_draw_top_body_header_left_name">人员姓名</div></div>
          <div className="alarmNotice2_draw_top_body_header_right">部门</div>
        </div>
        <div  className="alarmNotice2_draw_top_body_list">
          { 
              xingmingList.map((item,index)=>{
                return (
                  <div className="alarmNotice2_draw_top_body_list_item" key={item.id}>
                    <div className="alarmNotice2_draw_top_body_list_item_left">
                      <Checkbox  onChange={(e)=>onCheckChange(e,item)} checked={item.checked}></Checkbox>
                      <div className="alarmNotice2_draw_top_body_list_item_left_name">{item.name}</div>
                    </div>
                    <div className="alarmNotice2_draw_top_body_list_item_right">{item.department}</div>
                  </div>
                )
              })
          }
        </div>
      </div>
    
  )
}

export default RcCheckBoxList;



src/RcCheckBoxList/RcCheckBoxList.css文件
.alarmNotice2_draw_top_body{
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
}
.alarmNotice2_draw_top_body_header{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #eee;
}
.alarmNotice2_draw_top_body_header_left{
  width: 49%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.alarmNotice2_draw_top_body_header_left_name{
  margin-left: 10px;
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, .85);
}
.alarmNotice2_draw_top_body_header_right{
  width: 49%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, .85);
}
.alarmNotice2_draw_top_body_list{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items:center;
}
.alarmNotice2_draw_top_body_list_item{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #efefef;
}
.alarmNotice2_draw_top_body_list_item_left{
  width: 49%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.alarmNotice2_draw_top_body_list_item_left_name{
  margin-left: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, .85);
}
.alarmNotice2_draw_top_body_list_item_right{
  width: 49%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, .85);
}
.alarmNotice2_draw_bottom{
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items:center;
}
.alarmNotice_draw_bottom_btn{
  margin-right: 10px;
  border-radius: 5px;
}




src/index.js文件
import RcCheckBoxList from './RcCheckBoxList/RcCheckBoxList.js';
export {RcCheckBoxList};

对应目录结构：

第四步：babel转码 将es6变成浏览器可以读取的es5

javascript 复制代码 
npm install --save-dev 
babel-cli 
babel-core 
babel-loader 
babel-plugin-istanbul 
babel-preset-es2015 
babel-preset-react 
babel-preset-stage-0 
react 
react-dom
antd@4.x.x

安装好后package.json如下：

javascript 复制代码 
"devDependencies": {
    "antd": "^4.24.16",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^10.0.0",
    "babel-plugin-istanbul": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  }

第五步：修改我们的入口文件，并且修改scripts文件

javascript 复制代码 
"main": "./lib/index.js",
"scripts": {
    "clean": "rm -rf lib && mkdir lib",
    "lib": "npm run clean && babel src --out-dir lib --copy-files"
},

修改后和上图一致

第六步：项目根目录中添加.babelrc文件

javascript 复制代码 
{"presets": ["es2015","stage-0","react"],"plugins": ["transform-react-jsx"]}

第七步：打包

javascript 复制代码 
项目根目录中运行：
npm run lib

第八步：发布至NPM

javascript 复制代码 
npm login
输入相关账号密码或者验证码
npm publish 
推送包到npm
相关推荐
lichenyang4533 分钟前
Vue生命周期以及自定义钩子和路由
前端
程序员二师兄6 分钟前
记一次鸿蒙webview图片渲染失败的问题
前端·javascript·harmonyos
萌萌哒草头将军6 分钟前
字节也在用的 @tanstack/react-query 到底有多好用！🔥🔥🔥
前端·javascript·react.js
lineo_8 分钟前
手写 pinia 持久化缓存插件，兼容indexDB
前端·vue.js
20269 分钟前
14.2.企业级脚手架-tsup的配置和使用
前端
Duck不必9 分钟前
从零到一：现代化 React 组件库搭建指南
react.js·前端框架
王林不想说话11 分钟前
新的枚举使用方式enum-plus
前端·vue.js·typescript
拾光拾趣录23 分钟前
HTML | 10个常犯的错误
前端·html
coding随想25 分钟前
常见UI事件解析：Load/Unload、Error/Abort、Resize/Scroll、Select/DOMFocusIn等
前端
鹧鸪yy27 分钟前
从Token介绍到单点登录SSO
前端·javascript
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04DeepSeek更新！速览DeepSeek V3.1新特性05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06Claude Code VSCode集成开发指南：AI编程助手完整配置07Spring 调试终于不再痛苦了08【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）092025最新国内服务器可用docker源仓库地址大全（2025年8月更新）10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南