制作react组件的package

最新推荐文章于 2024-07-24 11:50:06 发布

mmzzll2019

最新推荐文章于 2024-07-24 11:50:06 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

分类专栏： React 制作npm包打包react组件文章标签： babel npm

本文链接：https://blog.youkuaiyun.com/mmzzll2019/article/details/116576659

本文介绍如何将React组件打包并在npm上发布。首先，通过创建项目和修改package.json配置，然后详细阐述npm账号注册、本地登录及发布组件的步骤，确保每次发布前更新版本号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们平常的项目都是常规的开发流程，打包后直接放到服务器运行。如何才能像我们安装react一样，直接从npm平台下载呢？下面我来说下我的实现方案：

1. 本地打包方式

1.1 创建项目

# 利用create-react-app插件创建react项目
npx create-react-app my-package
# 安装其他依赖
npm i -D @babel/cli rimraf

若还需要其他依赖，请自行安装。

1.2 修改package配置

我这里比较暴力，把所有的依赖都改成了devDependences。需要注意的几个配置如下：

{
   
   
	...
	"version": "0.1.0", // 每次发布时，记得先要更新这个版本号
	...
	"main": "build/index.js" // 指定编译后的文件入口
	...
	 "files": [ "build", "src" ] // 下载package时保留的文件
	...
	 "babel": {
   
     // babel编译配置
	    "presets": [
	      "@babel/preset-react",
	      "@babel/preset-env"
	    ]
	  },
	 ...
}

具体配置如下：

{
   
   
  "name": "my-package",
  "version": "0.1.0",
  "main": "build/index.js",
  "devDependencies": {
   
   
    "@babel/cli": "^7.13.16",
    "@babel/core": "7.12.3",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@svgr/webpack": "5.5.0",
    "@testing-library/jest-dom": "^5.12.0",