当前位置: 首页 > news >正文

【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官网 微控制器开发套件版本说明 前言 作为最常见的单片机程序编辑工具&#xff0c;keil有绝对的占有率。Keil提供了包括C编译器、宏汇编、链接器、库管理和一个功能强大的仿真调试器等在内的完整开发方案&#xff0c;通过一个集成开发环境&am…...

【vluhub】elasticsearch漏洞

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

七言-绝美崇州

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

C++11新增特性及右值引用

1. 统一的列表初始化 1.1 &#xff5b;&#xff5d;初始化 在C98中&#xff0c;标准允许使用花括号{}对数组或者结构体元素进行统一的列表初始值设定。C11扩大了用大括号括起的列表(初始化列表)的使用范围&#xff0c;使其可用于所有的内置类型和用户自 定义的类型&#xff0…...

MySQL --- 表的操作

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

MongoDB 基础知识

一、为什么学习MongoDB MongoDB解决Mysql 的“三高”问题&#xff1a; 1.对数据库高并发写入需求 2.对海量数据高效率存储访问需求 3.对数据库高扩展和高可用的需求 MongoDB 实际应用&#xff1a; 1.社交场景&#xff0c;比如朋友圈&#xff0c;附近的人的地点的存储 2.…...

HDFS原理

HDFS&#xff08;Hadoop Distributed File System&#xff09; HDFS——hadoop的分布式文件存储系统 HDFS原理19:49...

49、PHP 实现堆排序

题目&#xff1a; PHP 实现堆排序 描述&#xff1a; 堆排序基本思想:堆排序(HeapSort)是一树形选择排序。在排序过程中&#xff0c;将R[l…n]看成是一棵完全二叉树的顺序存储结构&#xff0c;利用完全二叉树中双亲结点和孩子结点之间的内在关系&#xff0c;在当前无序区中选择…...

鸿蒙9+在TV端焦点封装控制

鸿蒙9 目前不支持鸿蒙系统电视&#xff0c;但是往后肯定是必须会支持的&#xff0c;所以直接学arkts就完事了&#xff0c;目前的api9对焦点控制还是不够直接简洁&#xff0c;估计还在完善中&#xff0c;但是可以通过自定义component来实现一下 首先踩坑&#xff1a; Row官方说…...

操作系统课程设计:(JAVA)进程管理系统(附源码zip,jdk11,IDEA Ultimate2024 )

一.题目要求描述 本设计的目的是加深对进程概念及进程管理各部分内容的理解&#xff1b;熟悉进程管理中主要数据结构的设计及进程调度算法、进程控制机构、同步机构及通讯机构的实施。要求设计一个允许n个进程并发运行的进程管理模拟系统。 该系统包括有简单的进程控制、同步与…...

机器学习 | 回归算法原理——随机梯度下降法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。接着上次的多重回归继续更新《白话机器学习的数学》这本书的学习笔记&#xff0c;在此分享随机梯度下降法这一回归算法原理。本章的回归算法原理还是基于《基于广告费预测点击量》项目&#xff0c;欢迎大家交流学习&#xff01;…...

LeetCode 面试经典 150 题 | 位运算

目录 1 什么是位运算&#xff1f;2 67. 二进制求和3 136. 只出现一次的数字4 137. 只出现一次的数字 II5 201. 数字范围按位与 1 什么是位运算&#xff1f; ✒️ 源自&#xff1a;位运算 - 菜鸟教程 在现代计算机中&#xff0c;所有数据都以二进制形式存储&#xff0c;…...

postMessage 收到消息类型 “webpackWarnings“

场景描述&#xff1a; 当A系统中的parent页面使用iframe内嵌C系统的child页面&#xff0c;并且在parent页面中通过postMessageg给child页面发送消息时&#xff0c;如果C系统中使用了webpack,则webpack也会给child页面发送消息 &#xff0c;消息类型为webpackWarnings。那么如何…...

计算机基础(day1)

1.什么是内存泄漏&#xff1f;什么是内存溢出&#xff1f;二者有什么区别&#xff1f; 2.了解的操作系统有哪些&#xff1f; Windows&#xff0c;Unix&#xff0c;Linux&#xff0c;Mac 3. 什么是局域网&#xff0c;广域网&#xff1f; 4.10M 兆宽带是什么意思&#xff1f;理论…...

cesium添加流动线

1&#xff1a;新建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

场景&#xff1a; 防止接收数据时处理不过来导致阻塞&#xff0c;使用ArrayBlockingQueue队列存储数据后&#xff0c;以多线程的方式处理数据 保证系统性能。 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 测试代码效果展示 总结 前言 在开发跨平台的音视频应用程序时&#xff0c;SDL2&#xff08;Simple DirectMedia Layer 2&#xff09;是一个备受欢迎的选择。SDL2 是一个开源库&#x…...

JavaScript 里的深拷贝和浅拷贝

JavaScript 里的深拷贝和浅拷贝 JS中数据类型分为基本数据类型和引用数据类型。 基本类型值指的是那些保存在栈内存中的简单数据段。包含Number&#xff0c;String&#xff0c;Boolean&#xff0c;Null&#xff0c;Undefined &#xff0c;Symbol。 引用类型值指的是那些保存…...

Oracle基础-集合

集合&#xff1a;两个结果集的字段个数和字段类型必须相同&#xff0c;才能使用集合操作。 --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 全集 包含所有记录 不去重…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...