React 低代码项目：项目创建

Date: January 29, 2025

项目创建

思路：

• 使用 Create-React-App 创建 React 项目
• 使用 Vite 创建 React 项目
• 使用 eslint prettier husty 等，制定编码规则

---

---

创建项目

注：在这之前，推荐 node 版本：node/18.20.6 ，否则会遇到各种兼容性bug

## 使用 npx
npx create-react-app my-app --template typescript

## 使用 npm
npm init react-app my-app --template typescript

**项目结构：**项目入口 src/App.js

启动项目：npm start

---

📒 笔记：

npm 和 npx 的区别：

• npm 更侧重于包的管理和维护。
• npx 则专注于命令行工具的即时执行和跨项目的一次性操作。

	npm	npx
用途	管理和安装包	临时执行包
是否需要安装	需要先 npm install	不需要安装，直接运行
作用范围	主要用于项目依赖	主要用于 CLI 工具
示例	npm install -g eslint eslint .	npx eslint .（无需全局安装）

---

---

问题修复

文件系统操作冲突

问题快照：

问题分析：

这个错误信息表明在使用 npx 和 create-react-app 创建新的 React 应用时，出现了由于文件系统操作（特别是重命名）导致的权限或存在冲突的问题。具体而言，npm 在尝试重命名缓存目录中的某个文件时遇到了文件已经存在的问题。同时，还涉及到权限不足的情况。

错误码和系统调用：

• npm ERR! code EEXIST：表示在进行文件操作时，目标路径已经存在同名文件。这通常出现在尝试创建、移动或重命名一个文件到一个已经存在的文件路径时。
• npm ERR! syscall rename：指出失败的系统调用是 rename，即在尝试重命名一个文件路径的时候发生错误。

解决方案：

1. 清理 npm 缓存：

使用 npm cache clean --force 来强制清理 npm 缓存。这可以解决由缓存文件损坏引起的问题。

npm cache clean --force

1. 检查并修复权限问题：

• 确保您具有对 .npm 目录的正确权限。有时候因为之前的安装操作以 root 用户执行导致现在的用户权限不足。

• 使用以下命令更改 .npm 目录的所有权：

  sudo chown -R $(whoami) ~/.npm
  

• 如果您在全局安装包时遇到权限问题，可以考虑使用 nvm（Node Version Manager）来管理 Node.js 和 npm，以避免使用 sudo。

1. 删除冲突文件：

• 手动删除错误信息中提到的具体路径上的冲突文件：

rm -rf /Users/nathanchen/.npm/_cacache/content-v2/sha512/30/8b/3c91d31ffce7e8ab92600bb41d5442612d23c9ac1ad212415b7d768686fe6cc3a56ae156e64fa442b6f60b1be83eb0c02eb87bbaaf76e4a44351555f

1. 使用 -force 参数重新运行命令：

• 使用 -force 参数来强制覆盖现有文件，不过这需要谨慎，因为它可能会覆盖掉重要文件。

• 修改命令如下：

  npx create-react-app my-app --template typescript --force
  
  

1. 确保 npm 和 Node.js 是最新的：

• 更新 npm 到最新版本，这样能避免已知的旧版本问题：

  npm install -g npm@latest
  
  

• 确保 Node.js 也是最新稳定版，可以从官方网站下载更新版本。

1. 查看详细日志：

• 查看完整的日志文件 /Users/nathanchen/.npm/_logs/2025-01-30T05_48_04_261Z-debug-0.log，以获取更多信息和上下文，帮助诊断特定问题。

这里我采用 清理 npm 缓存 成功解决问题，从而项目可以正常创建

nathanchen