使用npx create-react-app报错求助？已重装Node并配置环境变量

方案1：清除npx缓存 #

执行命令清除npx缓存，避免缓存的旧包引发异常：

npx clear-npx-cache

之后重新运行创建命令：

npx create-react-app bookstore

方案2：全局安装create-react-app后创建 #

先全局安装create-react-app工具：

npm install -g create-react-app

再执行项目创建命令：

create-react-app bookstore

方案3：切换npm镜像源（针对网络类问题） #

如果是网络原因导致无法拉取依赖，切换到国内镜像源：

npm config set registry https://registry.npmmirror.com/

配置完成后重新执行项目创建命令。

方案4：手动初始化React项目（绕过create-react-app） #

如果以上方案都无效，可手动搭建基础React项目：

1. 创建项目文件夹并进入：

mkdir bookstore && cd bookstore

2. 初始化npm项目：

npm init -y

3. 安装核心依赖：

npm install react react-dom

4. 安装开发依赖：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

5. 在根目录创建babel.config.json文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

6. 创建webpack.config.js配置文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    hot: true,
    open: true
  }
};

7. 创建public/index.html页面模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bookstore</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

8. 创建src/index.js入口文件：

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello Bookstore!</h1>);

9. 在package.json的scripts字段中添加启动、打包命令：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

完成后执行npm start即可启动项目。

内容的提问来源于stack exchange，提问作者Deep Akabari