在使用Create-React-App TypeScript模板时遇到问题,输出的是JS文件而不是TSX文件
P粉680487967
P粉680487967 2023-08-17 13:21:24
0
1
620
<p>在尝试使用Create-React-App模板和TypeScript创建新的React应用程序时,我遇到了一个问题。我按照官方文档(https://create-react-app.dev/docs/adding-typescript/)上的说明进行操作,并使用了以下命令:</p> <pre class="lang-bash prettyprint-override"><code>npx create-react-app my-app --template typescript </code></pre> <p>以下是命令的结果:</p> <pre class="brush:php;toolbar:false;">正在安装软件包。这可能需要几分钟时间。 您正在使用的react-scripts版本与--template选项不兼容。 正在安装react、react-dom和react-scripts... 在32秒内添加了995个软件包 有34个软件包正在寻找资金 运行 `npm fund` 了解详情 成功!在/home/ristirianto/belajar-react/my-app-test下创建了my-app-test 在该目录中,您可以运行多个命令: npm start 启动开发服务器。 npm run build 将应用程序打包为用于生产的静态文件。 npm test 启动测试运行器。 npm run eject 删除此工具并将构建依赖项、配置文件和脚本复制到应用程序目录中。如果这样做,您将无法返回! 我们建议您从输入以下内容开始: cd my-app-test npm start 愉快的编程! 注意:该项目是使用旧版本的不受支持的工具引导的。 请更新到Node >=14和npm >=6,以获取新项目中支持的工具。</pre> <p>我的Node版本:v18.17.1 我的NPM版本:9.6.7</p> <p>然而,在安装过程结束后,当我检查<code>my-app</code>文件夹中的文件时,我注意到文件的扩展名为<code>.js</code>,而不是TypeScript文件应有的<code>.tsx</code>。这似乎表明TypeScript没有正确配置。</p> <p>我不确定我是否漏掉了任何步骤,或者设置有什么问题。在使用<code>--template typescript</code>选项时,是否有什么步骤我应该采取来确保TypeScript正确配置?</p> <p>对于如何排除和解决此问题的任何指导或建议将不胜感激。提前感谢您的帮助!</p>
P粉680487967
P粉680487967

全部回复(1)
P粉852114752

问题

您正在使用的 create-react-app 版本不支持 --template 选项。因此,--template typescript 没有任何效果,您的项目中没有生成 .tsx 文件。

至于为什么 npx create-react-app 不使用支持 --template 的版本,我怀疑您在本地全局安装了旧版本的 create-react-app。我怀疑这是因为:

  1. npx 可以运行本地安装的包(不仅限于远程包):

    npx 文档

  2. npx 会提示是否安装远程包,但您的输出没有显示此提示。提示如下所示:

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

您可以通过检查全局安装的包来验证上述内容:

  • npm: npm list -g
  • Yarn: yarn global list

解决方案

在验证了您是否全局安装了 create-react-app 之后,您可以卸载它:

  • npm: npm uninstall -g create-react-app
  • Yarn: yarn global remove create-react-app

create-react-app 还建议您不要全局安装版本:

入门指南:快速入门,创建 React 应用

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板