一个 create-react-app v5 的问题

sxkk20082年前知识分享163

前言

前两天我准备用 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

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

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

相关文章

有个问题就是,右上角的“保存”无法显示,查了下github chrome-aws-lambda 不包含任何字体,所以要支持中文,先要加载中文字体

readme 中有 demo

await chromium.font('/var/task/fonts/NotoColorEmoji.ttf" alt="实现一个 Code Pen:(六)云函数生成网页缩略图">

实现一个 Code Pen:(六)云函数生成网页缩略图

前言在前面的文章中,我们已经实现了编辑器的功能,并且数据可以保存到云数据库,接下来我们需要生成缩略图的功能,目前掘金的的 code pen 还没有缩略图的功能,这是否是一个挑战呢?缩略图生成方法生成缩...

AI绘画图片的最新发展趋势:从技术到艺术

AI绘画图片的最新发展趋势:从技术到艺术

  随着人工智能的快速发展和深度学习技术的日益成熟,人们对于其在各个领域的应用变得越来越感兴趣。近年来,AI绘画图片成为了人们热议的话题之一。AI绘画图片是指通过人工智能算法...

在 Webpack 5 中开启懒编译(Lazy Compilation)

在 webpack 5 中推出了 experiments 配置,目的是为了给用户赋能去开启并试用一些实验的特性。由于实验特性具有相对 宽松的语义版本,可能会有重大的变更,所以你需要将 webpack...

AI算法的中心研究有哪些?

AI算法的中心研究有哪些?

  AI技术的快速发展和普及引发了对人工智能算法的关注,而这些算法又是AI技术的核心。本文将介绍目前常见的AI算法中的五个中心,分别是机器学习算法、深度学习算法、遗传算法、模...

智能家居技术:构建未来智慧家庭的人才需求与发展机遇

智能家居技术:构建未来智慧家庭的人才需求与发展机遇

  随着科技的不断进步与智能化的发展,智能家居已经成为了人们生活的一部分。智能家居技术的快速发展也带来了对相关行业的专业人才的需求。在这个快节奏的时代里,智能家居招聘市场正迅...

AI绘画:让艺术创作更加普惠化

AI绘画:让艺术创作更加普惠化

  随着人工智能技术的不断发展,它在各个领域的应用不断拓展。在艺术领域,AI也开始逐渐应用起来,其中一个突出的应用便是AI教绘画。AI绘画通过人工智能算法模拟人类绘画的过程,...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。