React 开发环境搭建

安装 nvm

nvm 是运行 Node.js 的流行方式。 它允许你轻松切换 Node.js 版本,并安装新版本以尝试在出现问题时轻松回滚,它适用于任何符合 POSIX 的 shell 环境。因此在 Windows 中,最好是使用 WSL 来进行开发。

安装 nvm 非常简单,可以直接通过如下的命令来进行安装。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

具体的 nvm 版本,你可以在 https://github.com/nvm-sh/nvm 中进行查看,以安装最新的 nvm 版本。

安装 Node.js

当你安装好了 nvm 之后,就可以安装 Node.js 了。

要下载安装最新版本的 node,请执行以下命令:

nvm install node

要安装特定版本的 node,请执行以下作:

nvm install 14.7.0

要设置别名:

nvm alias my_alias v14.4.0

安装的第一个版本将成为默认 nodejs 版本。新打开的 shell 环境中的也将是默认版本。

可以使用以下方法列出所有可用的 nodejs 版本

nvm ls-remote

上述命令列出的 nodejs 版本中会包含 LTS 版本,一般而言,推荐安装 nodejs 的 LTS 版本,即长期支持版本。

如果要查看已安装的版本, 可以执行以下命令:

nvm ls

切换 nodejs 版本,可以执行以下命令,即可切换到指定的版本:

nvm use 16

npm介绍

npm 是 Node.js 的包管理工具,它允许你安装和运行 Node.js 的第三方模块。它的使用非常简单,我们可以通过 npm install xxx 来安装指定的软件包,默认情况下软件包会被安装到当前文件树中的 node_modules 子文件夹下。在这种情况下,npm 还会在当前文件夹中存在的 package.json 文件的 dependencies 属性中添加 xxx 条目。

安装包:

npm install <package-name>@<version>

可以只指定包名称,不指定版本,版本是可选项,默认会安装最新的版本。

卸载软件包:

npm uninstall <package-name>

更新指定的包:

npm update <package-name>

更新所有包:

npm update

更新所有包的时候,npm 将检查所有包是否有满足你的版本控制约束的更新版本。推荐在项目下使用 npm update 命令,这样 npm 会检查当前项目下所有依赖的包是否有更新版本。

查看所有已安装的 npm 软件包

npm list

查看软件包在 npm 仓库上最新的可用版本:

npm view [package_name] version

列出软件包所有的以前的版本:

npm view react versions

package.json介绍

package.json 文件是项目的清单。其中包含了项目的依赖项,比如 Node.js 的版本,依赖项,开发依赖项,脚本等。其中比较重要的字段有以下部分。

  • version 表明了当前的版本。
  • name 设置了应用程序/软件包的名称。
  • description 是应用程序/软件包的简短描述。
  • main 设置了应用程序的入口点。
  • private 如果设置为 true,则可以防止应用程序/软件包被意外地发布到 npm。
  • scripts 定义了一组可以运行的 node 脚本。
  • dependencies 设置了作为依赖安装的 npm 软件包的列表。
  • devDependencies 设置了作为开发依赖安装的 npm 软件包的列表。
  • engines 设置了此软件包/应用程序在哪个版本的 Node.js 上运行。
  • browserslist 用于告知要支持哪些浏览器(及其版本)。

package-lock.json介绍

在 npm 5.0.0 版本后,npm 引入了 package-lock.json 文件,该文件旨在跟踪被安装的每个软件包的确切版本,以便产品可以以相同的方式被 100% 复制(即使软件包的维护者更新了软件包)。

确保依赖版本的一致性(Version Locking)

package.json 允许使用 版本范围(如 ^1.2.3 或 ~1.2.3),这样不同环境(比如开发环境和生产环境)可能会安装到不同的依赖版本,导致 “它在我电脑上可以跑” 这种经典问题。

package-lock.json 记录了 每个安装的确切版本,确保所有开发者、CI/CD、生产环境安装的都是同一个版本,避免版本漂移问题。

提高安装速度(Performance Optimization)

package-lock.json 记录了依赖的 完整解析信息(包括 resolved URL 和 integrity 哈希值),这样 npm 可以 直接使用这些信息下载依赖,跳过解析 package.json 的过程,提高安装速度。

防止间接依赖变化

package.json 只管理 直接依赖,但实际安装的模块可能还有 间接依赖(transitive dependencies)。

package-lock.json 记录了所有 直接 + 间接 依赖的版本,确保即使某个间接依赖发布了新版本,也不会影响现有项目。

npx介绍

npx 是一个非常强大的命令,从 npm 的 5.2 版本(发布于 2017 年 7 月)开始可用。npx 可以运行使用 Node.js 构建并通过 npm 仓库发布的代码。

Node.js 开发者过去通常将大多数可执行命令发布为全局的软件包,以使它们处于路径中且可被立即地执行。这很痛苦,因为无法真正地安装同一命令的不同版本。

npx 的另一个重要的特性是,无需先安装命令即可运行命令,这非常有用,主要是因为:

  1. 不需要安装任何东西。
  2. 可以使用 @version 语法运行同一命令的不同版本。

例如,可以直接使用 create-react-app 创建新的 React 应用:npx create-react-app my-react-app

创建React项目

创建 React 项目最简单的方法是使用 npx 命令。

npx create-react-app my-app

这样就可以创建一个名为 my-app 的 React 项目了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/41595.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins最新版,配置Gitee私人令牌和Gitee凭证

jenkins 配置Gitee私人令牌和凭证 jenkins 版本&#xff1a;Jenkins 2.492.2 Gitee配置 Jenkins配置gitee插件&#xff0c;需要先申请gitee私钥。 安装gitee插件 申请Gitee私人令牌&#xff0c;后面还需要添加凭证。 测试链接&#xff0c;并保存 配置凭证

ORACLE RAC ASM双存储架构下存储部分LUN异常的处理

早上接到用户电话&#xff0c;出现有表空间不足的告警&#xff0c;事实上此环境经常巡检并且有告警系统&#xff0c;一开始就带着有所疑惑的心理&#xff0c;结果同事在扩大表空间时&#xff0c;遇到报错 ORA-15401/ORA-17505,提示ASM空间满了&#xff1a; ALERT日志&#xff1…

Windows下docker使用教程

docker安装 镜像制作镜像加载容器创建更新镜像导出镜像 Windows10安装dockerdocker image制作docker 镜像加载docker 容器创建更新imageimage 导出为.tar文件 #以Windows10 、11为例 linux和Windows区别在于docker安装的程序是哪个操作系统的&#xff0c;后面的内容其实不变 …

9.4分漏洞!Next.js Middleware鉴权绕过漏洞安全风险通告

今日&#xff0c;亚信安全CERT监控到安全社区研究人员发布安全通告&#xff0c;Next.js 存在一个授权绕过漏洞&#xff0c;编号为 CVE-2025-29927。攻击者可能通过发送精心构造的 x-middleware-subrequest 请求头绕过中间件安全控制&#xff0c;从而在未授权的情况下访问受保护…

代码随想录算法训练营Day12 | Leetcode 226翻转二叉树、101对称二叉树、104二叉树的最大深度、111二叉树的最小深度

代码随想录算法训练营Day12 | Leetcode 226翻转二叉树、101对称二叉树、104二叉树的最大深度、111二叉树的最小深度 一、翻转二叉树 相关题目&#xff1a;Leetcode226 文档讲解&#xff1a;Leetcode226 视频讲解&#xff1a;Leetcode226 1. Leetcode226.翻转二叉树 给你一棵二…

3.26学习总结 做题

先初始化n1时&#xff0c;输出的图案。 观察可以得到&#xff0c;n每加1&#xff0c;则在原先图案的左下方和右下方重新打印一遍原先的图案&#xff0c;可以分为两步。 1.复制原先图案打印在其正下方和右下方&#xff0c;并将原先图案清空。 2.在现在图案的上方中间打印原先…

Linux学习笔记(应用篇二)

基于I.MX6ULL.MINI开发板 开发板与电脑相互通信电脑与开发板互传文件 开发板与电脑相互通信 用网线将电脑与开发板连接 本人使用的是Ubuntu系统&#xff0c;不是虚拟机 一般来说刚开始电脑和开发板是ping不通的 首先查看电脑的 IP WinR&#xff0c;cmd调出终端 我使用的是…

【gradio】从零搭建知识库问答系统-Gradio+Ollama+Qwen2.5实现全流程

从零搭建大模型问答系统-GradioOllamaQwen2.5实现全流程&#xff08;一&#xff09; 前言一、界面设计&#xff08;计划&#xff09;二、模块设计1.登录模块2.注册模块3. 主界面模块4. 历史记录模块 三、相应的接口&#xff08;前后端交互&#xff09;四、实现前端界面的设计co…

中间件漏洞-Tomcat篇

一&#xff1a;CVE-2017-12615 1.搭建服务 cd /www/wwwroot/vulhub-master/tomcat/CVE-2017-12615 docker-compose up -d 2.打开网页 3.在哥斯拉中生成jsp木马并保存为2.jpg 对当前页面进行抓包&#xff0c;修改提交方式为PUT并复制木马 4.在网页中访问我们生成的木马&#…

PHP eval 长度限制绕过与 Webshell 获取

在 PHP 代码中&#xff0c;如果 eval($param); 存在且长度受限&#xff0c;并且过滤了 eval 和 assert&#xff0c;仍然可以通过多种方法绕过限制&#xff0c;获取 Webshell。 源码 <?php $param $_REQUEST[param]; if(strlen($param)<17 && stripos($param,…

31天Python入门——第15天:日志记录

你好&#xff0c;我是安然无虞。 文章目录 日志记录python的日志记录模块创建日志处理程序并配置输出格式将日志内容输出到控制台将日志写入到文件 logging更简单的一种使用方式 日志记录 日志记录是一种重要的应用程序开发和维护技术, 它用于记录应用程序运行时的关键信息和…

特殊行车记录仪DAT视频丢失的恢复方法

行车记录仪是一种常见的车载记录仪&#xff0c;和常见的“小巧玲珑”的行车记录仪不同&#xff0c;一些特种车辆使用的记录仪的外观可以用“笨重”来形容。下边我们来看看特种车载行车记录仪删除文件后的恢复方法。 故障存储: 120GB存储设备/文件系统:exFAT /簇大小:128KB 故…

机器学习——KNN数据均一化

在KNN&#xff08;K-近邻&#xff09;算法中&#xff0c;数据均一化&#xff08;归一化&#xff09;是预处理的关键步骤&#xff0c;用于消除不同特征量纲差异对距离计算的影响。以下是两种常用的归一化操作及其核心要点&#xff1a; 质押 一 、主要思想 1. 最值归一化&#…

Element UI实现表格全选、半选

制作如图所示的表格全选、半选&#xff1a; 父组件 <template><div id"app"><SelectHost :hostArray"hostArray" /></div> </template><script> import SelectHost from ./components/SelectHost.vue export default…

深度学习入门1 基于Python的理论与实现

torch.unsqueeze()将一维数据变为二维数据&#xff0c;torch只能处理二维数据 tensor不能反向&#xff0c;variable可以反向。variable.data.numpy()转换为numpy 第3章 神经网络 实现softmax函数时的注意事项&#xff1a;为防止e的指数运算造成溢出 矩阵的第 0 维是列方向,第…

vue响应式原理剖析

一、什么是响应式? 我们先来看一下响应式意味着什么?我们来看一段代码: m有一个初始化的值,有一段代码使用了这个值; 那么在m有一个新的值时,这段代码可以自动重新执行; let m = 20 console.log(m) console.log(m * 2)m = 40上面的这样一种可以自动响应数据变量的代码机…

UDP数据报套接字编程

1.DatagramSocket API Socket是操作系统中的一个概念 本质上是一种特殊的文件 Socket就属于是把"网卡"这个设备,抽象成文件了 往Socket文件中写数据,就相当于通过网卡发送数据 从Socket文件读数据,就相当于通过网卡接受数据 在Java中就使用DatagramSocket这个类…

逼用户升级Win11,微软开始给Win10限速

随着Windows10的支持时间越来越短&#xff0c;微软也加大了对Win10用户的驱赶力度。 最近&#xff0c;微软官宣了将要在今年6月份降低OneNote for Windows 10的同步速度。软件也将和Windows10在今年的10月14日一同停止支持和维护。 这将影响实时协作和多设备访问。 对OneNote…

NodeJs之http模块

一、概念&#xff1a; 1、协议&#xff1a;双方必须共同遵从的一组约定。 Hypertext Transfer Protocol&#xff1a;HTTP&#xff0c;超文本传输协议 2、请求&#xff1a; ① 请求报文的组成&#xff1a; 请求行请求头空行请求体 ② 请求行&#xff1a;

26考研——图_图的应用(6)

408答疑 文章目录 四、图的应用图的应用考查形式最小生成树最小生成树概念最小生成树的性质最小生成树中某顶点到其他顶点是否具有最短路径的分析构造最小生成树的算法Prim 算法Prim 算法概述Prim 算法的构建思想Prim 算法的步骤Prim 算法的示例Prim 算法的性质 Kruskal 算法Kr…