【React】package.json 文件详解
文章目录
- 一、package.json 文件的基本结构
- 二、package.json 文件的关键字段
- 1. name 和 version
- 2. description
- 3. main
- 4. scripts
- 5. dependencies 和 devDependencies
- 6. repository
- 7. keywords
- 8. author 和 license
- 9. bugs 和 homepage
- 三、package.json 文件的高级配置
- 1. 配置 Babel
- 2. 配置 ESLint
- 3. 配置 Browserslist
- 4. 配置 Husky 和 lint-staged
- 四、实际应用案例
在任何一个 React 项目中,
package.json
文件都是不可或缺的核心配置文件。它不仅记录了项目的基本信息,还管理着项目的依赖、脚本和各种配置。本文将详细介绍package.json
文件的各个部分,从基础到高级应用,帮助你全面掌握如何有效地配置和管理 React 项目。
一、package.json 文件的基本结构
package.json
文件是一个 JSON 格式的文件,通常位于项目的根目录中。以下是一个典型的 package.json
文件的示例:
{"name": "my-app","version": "1.0.0","description": "A simple React application","main": "index.js","scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},"dependencies": {"react": "^17.0.2","react-dom": "^17.0.2","react-scripts": "4.0.3"},"devDependencies": {},"repository": {"type": "git","url": "git+https://github.com/yourusername/my-app.git"},"keywords": ["react","application"],"author": "Your Name","license": "MIT","bugs": {"url": "https://github.com/yourusername/my-app/issues"},"homepage": "https://github.com/yourusername/my-app#readme"
}
二、package.json 文件的关键字段
1. name 和 version
name
字段指定了项目的名称,通常使用小写字母和连字符。version
字段表示项目的版本号,遵循语义化版本控制(SemVer)规范。
{"name": "my-app","version": "1.0.0"
}
2. description
description
字段用于简要描述项目的功能和用途。
{"description": "A simple React application"
}
3. main
main
字段指定了项目的入口文件,通常用于库或包的开发。在 React 应用中,这个字段通常不会用到,因为 Webpack 等打包工具会处理入口文件。
{"main": "index.js"
}
4. scripts
scripts
字段定义了一组命令,可以通过 npm run <script-name>
来执行。这些脚本可以用于启动开发服务器、构建项目、运行测试等。
{"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}
}
5. dependencies 和 devDependencies
dependencies
字段列出了项目运行时所需的依赖包,而 devDependencies
字段则列出了开发时所需的依赖包。使用 npm install <package-name>
安装的包会默认添加到 dependencies
中,使用 npm install <package-name> --save-dev
安装的包会添加到 devDependencies
中。
{"dependencies": {"react": "^17.0.2","react-dom": "^17.0.2","react-scripts": "4.0.3"},"devDependencies": {}
}
6. repository
repository
字段用于指定项目的代码仓库地址,通常是 Git 仓库的 URL。这有助于其他开发者找到项目的源代码。
{"repository": {"type": "git","url": "git+https://github.com/yourusername/my-app.git"}
}
7. keywords
keywords
字段是一个数组,用于指定与项目相关的关键字,便于在 npm 搜索中找到项目。
{"keywords": ["react","application"]
}
8. author 和 license
author
字段用于指定项目的作者信息,license
字段用于指定项目的许可证类型。
{"author": "Your Name","license": "MIT"
}
9. bugs 和 homepage
bugs
字段用于指定报告项目问题的 URL,homepage
字段用于指定项目的主页 URL。
{"bugs": {"url": "https://github.com/yourusername/my-app/issues"},"homepage": "https://github.com/yourusername/my-app#readme"
}
三、package.json 文件的高级配置
1. 配置 Babel
Babel 是一个 JavaScript 编译器,用于将现代 JavaScript 代码转换为向后兼容的版本。可以在 package.json
文件中配置 Babel。
{"babel": {"presets": ["@babel/preset-env", "@babel/preset-react"]}
}
2. 配置 ESLint
ESLint 是一个静态代码分析工具,用于识别和修复代码中的问题。可以在 package.json
文件中配置 ESLint。
{"eslintConfig": {"extends": ["react-app", "eslint:recommended"],"rules": {"no-unused-vars": "warn","eqeqeq": "error"}}
}
3. 配置 Browserslist
Browserslist 是一个配置工具,用于指定项目支持的浏览器范围。它可以用于 Babel、Autoprefixer 和其他工具,以确保项目的兼容性。
{"browserslist": [">0.2%","not dead","not op_mini all"]
}
4. 配置 Husky 和 lint-staged
Husky 是一个 Git 钩子工具,用于在提交代码之前运行脚本。lint-staged 是一个工具,用于在暂存文件上运行 linters。可以在 package.json
文件中配置它们,以确保提交的代码符合代码规范。
{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,jsx}": ["eslint --fix","git add"]}
}
四、实际应用案例
以下是一个综合了多种配置的 package.json
文件示例,展示了如何在一个实际项目中进行配置。
{"name": "my-advanced-app","version": "1.0.0","description": "An advanced React application with custom configurations","main": "index.js","scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","lint": "eslint src/**/*.js","format": "prettier --write src/**/*.js"},"dependencies": {"react": "^17.0.2","react-dom": "^17.0.2","react-scripts": "4.0.3"},"devDependencies": {"@babel/core": "^7.14.6","@babel/preset-env": "^7.14.5","@babel/preset-react": "^7.14.5","eslint": "^7.29.0","eslint-plugin-react": "^7.24.0","prettier": "^2.3.2","husky": "^7.0.1","lint-staged": "^11.0.0"},"repository": {"type": "git","url": "git+https://github.com/yourusername/my-advanced-app.git"},"keywords": ["react","application","advanced"],"author": "Your Name","license": "MIT","bugs": {"url": "https://github.com/yourusername/my-advanced-app/issues"},"homepage": "https://github.com/yourusername/my-advanced-app#readme","babel": {"presets": ["@babel/preset-env", "@babel/preset-react"]},"eslintConfig": {"extends": ["react-app", "eslint:recommended"],"rules": {"no-unused-vars": "warn","eqeqeq": "error"}},"browserslist": [">0.2%","not dead","not op_mini all"],"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,jsx}": ["eslint --fix","git add"]}
}
相关文章:

【React】package.json 文件详解
文章目录 一、package.json 文件的基本结构二、package.json 文件的关键字段1. name 和 version2. description3. main4. scripts5. dependencies 和 devDependencies6. repository7. keywords8. author 和 license9. bugs 和 homepage 三、package.json 文件的高级配置1. 配置…...

【嵌入式开发】Keil下载安装
目录 前言 一、Keil的安装 Keil官网 微控制器开发套件版本说明 前言 作为最常见的单片机程序编辑工具,keil有绝对的占有率。Keil提供了包括C编译器、宏汇编、链接器、库管理和一个功能强大的仿真调试器等在内的完整开发方案,通过一个集成开发环境&am…...

【vluhub】elasticsearch漏洞
Elasticsearch介绍 是Apache旗下的一个开源的、分布式、RESTful的搜索和分析引擎,适用于java语言项目 默认端口9200 kali中搭建ElasticHD, 即可未授权绕过ES可视化界面 直通车 https://github.com/360EntSecGroup-Skylar/ElasticHD/releases/download/1.4/elas…...

七言-绝美崇州
题记 今天,2024年07月30日,在看到《今日崇州》 发布的航拍风光照片之后,这才方知笔者虽已寄居崇州“西川第一天”街子古镇养老逾五年,竟然不知崇州拥有如此之多的青山绿水,集生态、宜居、智慧、文化、旅游丰富资源于一…...

C++11新增特性及右值引用
1. 统一的列表初始化 1.1 {}初始化 在C98中,标准允许使用花括号{}对数组或者结构体元素进行统一的列表初始值设定。C11扩大了用大括号括起的列表(初始化列表)的使用范围,使其可用于所有的内置类型和用户自 定义的类型࿰…...

MySQL --- 表的操作
在对表进行操作时,需要先选定操作的表所在的数据库,即先执行 use 数据库名; 一、创建表 create table 表名( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储引擎 ; 说明:…...

MongoDB 基础知识
一、为什么学习MongoDB MongoDB解决Mysql 的“三高”问题: 1.对数据库高并发写入需求 2.对海量数据高效率存储访问需求 3.对数据库高扩展和高可用的需求 MongoDB 实际应用: 1.社交场景,比如朋友圈,附近的人的地点的存储 2.…...
HDFS原理
HDFS(Hadoop Distributed File System) HDFS——hadoop的分布式文件存储系统 HDFS原理19:49...
49、PHP 实现堆排序
题目: PHP 实现堆排序 描述: 堆排序基本思想:堆排序(HeapSort)是一树形选择排序。在排序过程中,将R[l…n]看成是一棵完全二叉树的顺序存储结构,利用完全二叉树中双亲结点和孩子结点之间的内在关系,在当前无序区中选择…...
鸿蒙9+在TV端焦点封装控制
鸿蒙9 目前不支持鸿蒙系统电视,但是往后肯定是必须会支持的,所以直接学arkts就完事了,目前的api9对焦点控制还是不够直接简洁,估计还在完善中,但是可以通过自定义component来实现一下 首先踩坑: Row官方说…...

操作系统课程设计:(JAVA)进程管理系统(附源码zip,jdk11,IDEA Ultimate2024 )
一.题目要求描述 本设计的目的是加深对进程概念及进程管理各部分内容的理解;熟悉进程管理中主要数据结构的设计及进程调度算法、进程控制机构、同步机构及通讯机构的实施。要求设计一个允许n个进程并发运行的进程管理模拟系统。 该系统包括有简单的进程控制、同步与…...
机器学习 | 回归算法原理——随机梯度下降法
Hi,大家好,我是半亩花海。接着上次的多重回归继续更新《白话机器学习的数学》这本书的学习笔记,在此分享随机梯度下降法这一回归算法原理。本章的回归算法原理还是基于《基于广告费预测点击量》项目,欢迎大家交流学习!…...

LeetCode 面试经典 150 题 | 位运算
目录 1 什么是位运算?2 67. 二进制求和3 136. 只出现一次的数字4 137. 只出现一次的数字 II5 201. 数字范围按位与 1 什么是位运算? ✒️ 源自:位运算 - 菜鸟教程 在现代计算机中,所有数据都以二进制形式存储,…...
postMessage 收到消息类型 “webpackWarnings“
场景描述: 当A系统中的parent页面使用iframe内嵌C系统的child页面,并且在parent页面中通过postMessageg给child页面发送消息时,如果C系统中使用了webpack,则webpack也会给child页面发送消息 ,消息类型为webpackWarnings。那么如何…...

计算机基础(day1)
1.什么是内存泄漏?什么是内存溢出?二者有什么区别? 2.了解的操作系统有哪些? Windows,Unix,Linux,Mac 3. 什么是局域网,广域网? 4.10M 兆宽带是什么意思?理论…...
cesium添加流动线
1:新建Spriteline1MaterialProperty.js文件 import * as Cesium from cesium;export function Spriteline1MaterialProperty(duration, image) {this._definitionChanged new Cesium.Event();this.duration duration;this.image image;this._time performance.…...
使用java自带的队列进行存取数据ArrayBlockingQueue 多线程读取ExecutorService
场景: 防止接收数据时处理不过来导致阻塞,使用ArrayBlockingQueue队列存储数据后,以多线程的方式处理数据 保证系统性能。 package com.yl.demo.main4;import java.text.SimpleDateFormat; import java.util.Date; import java.util.concurr…...

【音视频之SDL2】Windows配置SDL2项目模板
文章目录 前言 SDL2 简介核心功能 Windows配置SDL2项目模板下载SDL2编译好的文件VS配置SDL2 测试代码效果展示 总结 前言 在开发跨平台的音视频应用程序时,SDL2(Simple DirectMedia Layer 2)是一个备受欢迎的选择。SDL2 是一个开源库&#x…...
JavaScript 里的深拷贝和浅拷贝
JavaScript 里的深拷贝和浅拷贝 JS中数据类型分为基本数据类型和引用数据类型。 基本类型值指的是那些保存在栈内存中的简单数据段。包含Number,String,Boolean,Null,Undefined ,Symbol。 引用类型值指的是那些保存…...

Oracle基础-集合
集合:两个结果集的字段个数和字段类型必须相同,才能使用集合操作。 --UNION 并集 重复行会去重 (SELECT A,B FROM DUAL UNION SELECT C,D FROM DUAL) UNION (SELECT A,B FROM DUAL UNION SELECT E,F FROM DUAL ); --UNION ALL 全集 包含所有记录 不去重…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...