一个 create-react-app v5 的问题

sxkk20081年前知识分享118

前言

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

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

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

相关文章

AI农业:未来农田的黑科技

AI农业:未来农田的黑科技

  随着科技的不断进步,以及人工智能技术的日益发展,AI农业正成为农业生产领域的一项重要变革。AI农业利用人工智能技术来提高农田的种植管理效率,为农业生产带来了创造性的变化。...

AI电话机器人—未来通讯市场新宠

AI电话机器人—未来通讯市场新宠

  随着人工智能技术的发展,AI电话机器人的出现引起了业界的广泛关注。作为一种具有自主学习和不断进化能力的通讯工具,它能够为企业和个人提供更加高效和便捷的通信方案,为未来的通...

经过一晚上的配置和折腾,花钱不说,虽然可以实现在 iPad 上编程的需求,但体验远却比不上 PC,今天我就来推荐一种新的方式,让你的 iPad 变成真正的生产力工具。

Cloud Studio 简介

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。

Cloud Studio iPad 编程 以上是我用 iPad 浏览器,在 1 分钟内初始化了一个 next 初始化模板,可以说速度比本地开发还快,当我在左侧修改代码时,右侧预览界面便会同步热更新。

Cloud Studio 安装 react snippts

Cloud Studio 可以说是提供了一台云服务器,并且把 VSCode 搬到了线上,我们可以同本地开发一样,在上面安装插件,比如可以在左侧扩展中搜索 react,安装这个 react snippts 扩展,便可以帮助我们提供常用代码片段,快速创建组件。

iPad 编程生产力

前言iPad 有个口号,就是“买前生产力,买后爱奇艺”,使用 iPad,配合 Procreate 来作画体验还可以, 如果你想让你的 iPad 可以编程,你却不得不为之花费时间和精力,我搜了网上的教程...

森随生活知识录

本网站为非盈利网站,所有图片、文字信息均来自于网友上传,本站不拥有此类作品的版权。相关知识介绍仅用于网友们学习参考之用,勿作它用;若需商业使用,需获得版权拥有者授权,并遵循国家相关法律、法...

常规配置

我们可以在 create 的第二个参数传递一个 option 参数。

参数说明类型默认值可选值
value编辑器的初始值string--
theme编辑器的主题样式,除了提供的可选值外,也可以通过 monaco.editor.defineTheme 自定义主题string'vs''vs','vs-dark','hc-black'
language编辑器的初始语言,例如可以设置为 javascript, json 等string--
model和编辑器关联的初始模型ITextModel--
lineNumbers控制行数的渲染,如果是 function,那么会使用 return 的内容作为行数展示string/Function'on" alt="VS code 使用的代码编辑器">

VS code 使用的代码编辑器

前言有时候我们会有在需要在网页中写代码或者改代码配置的需求,这个时候就需要用到代码编辑器,常规的代码编辑器有 CodeMirror 和 Monaco Editor, CodeMirror 使用的人比较...

智能机器人AI芯片:探索未来的可能性

智能机器人AI芯片:探索未来的可能性

  随着科技的发展和人工智能技术的逐渐成熟,智能机器人已经成为了人们日常生活中不可或缺的一部分。作为智能机器人的核心组成部分,AI芯片扮演着至关重要的角色。本文将从智能机器人...

发表评论    

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