一个 create-react-app v5 的问题

简介: 前两天我准备用 create-react-app 创建一个新项目,然后遇到了一个问题,涉及到 npx

highlight: an-old-hope

「这是我参与 2022 首次更文挑战的第 9 天,活动详情查看:2022 首次更文挑战」。

前言

前两天我准备用 create-react-app 创建一个新项目,然后我在命令行下执行

npx create-react-app my-app

命令行下就会提示

Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

提示意思是:create-react-app 从第五版本开始不再需要全局安装,让我先卸载 create-react-app

然后我就输入 npm uninstall -g create-react-app 进行全局卸载,然后再执行 npx create-react-app my-app 创建,结果还是上面的提示。

npx 介绍

npm 从 5.2 版开始,增加了 npx 命令。它有很多用处,主要使用有以下场景。

调用项目中的安装模块

原先要执行

node-modules/.bin/jest

代替

npx jest

避免全局安装模块

npx create-react-app my-app

上面代码运行时,npx 将create-react-app下载到一个临时目录,使用以后再删除。

然后我去 google 搜索答案,找到了这个issue,上面回答了一些解决办法。

使用不同版本的 node

利用 npx 可以下载模块这个特点,可以指定某个版本的 Node 运行脚本。它的窍门就是使用 npm 的  node 模块

npx node@0.12.8 -v

上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node,使用后再删掉。

某些场景下,这个方法用来切换 Node 版本,要比 nvm 那样的版本管理器方便一些。

执行 GitHub 源码

npx 还可以执行 GitHub 上面的模块源码。

执行 Gist 代码

npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32

执行仓库代码

npx github:piuccio/cowsay hello

注意,远程代码必须是一个模块,即必须包含package.json和入口脚本

原因

产生这个问题的原因是 npx 是有缓存的,但全局卸载后,npx 的缓存还在。

解决办法

方案一
使用固定版本号

npx create-react-app@5 <PROJECT_NAME>

方案二
使用 npm init代替

npm init react-app my-app

方案三
先清除 npx 缓存然后在初始化

npx clear-npx-cache
npx create-react-app my-app

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

本文首发掘金平台,来源小马博客

相关文章
|
4月前
|
BI PHP 项目管理
企业应用的隐形骨架——PHP与CRM、ERP、办公系统
在普通用户的认知中,PHP似乎主要用于网站开发。但在企业级应用领域,PHP同样扮演着举足轻重的角色。从客户关系管理到企业资源计划,从项目管理到内部协作,PHP构建了无数企业的数字化骨架,让组织运转更加高效。
182 1
|
6月前
|
Oracle Java 应用服务中间件
apache-tomcat-6.0.10使用步骤详解(附启动与部署教程)
Tomcat 6.0.10是经典Java Web服务器,适用于老项目部署。需先安装JDK 6/7并配置环境变量,解压后运行bin目录下startup.bat启动服务,浏览器访问localhost:8080验证。支持war包自动部署,可修改server.xml调整端口,关闭用shutdown.bat或Ctrl+C。
|
Web App开发 数据安全/隐私保护
解决input标签自动填充内容的问题
解决input标签自动填充内容的问题
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
285 0
|
JavaScript 开发者
vue解决报错Unable to preventDefault inside passive event listener invocation.
vue解决报错Unable to preventDefault inside passive event listener invocation.
2735 0
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
799 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
2174 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
JavaScript 编译器
33.【TypeScript 教程】命名空间
33.【TypeScript 教程】命名空间
261 2
|
JavaScript 编译器
TypeScript(十三)声明合并
TypeScript(十三)声明合并
587 0