如何使用 yarn 创建 React 应用项目？

Question

我正在尝试在 Windows 上使用 yarn 命令创建一个新的 React 项目。我试过命令 yarn init 和 yarn add react react-dom。但它只是将一些节点模块添加到我创建的项目中。 package.json 只包含这么多依赖项

{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
}

如何在启动项目之前添加所有其他依赖项和节点模块？

Answer 1

在使用以下命令启动项目之前：

yarn start

您需要使用以下方式安装模块：

yarn install // or simply, yarn

以下命令只会安装react、react-dom，不会安装核心依赖模块

yarn add react react-dom

PS：希望应该是react-router-dom而不是react-dom。

Answer 2

我会推荐 "create-react-app"，只是 "CRA"。 "CRA" 处理大部分构建配置，默认情况下它们是隐藏的，因此您可以专注于代码。（在某些特定情况下，您可以通过运行ning 命令 "eject" 弹出和自定义它）

您可以使用以下命令创建项目

yarn create react-app my-app

只需在命令运行下启动项目

yarn start

构建项目

yarn build

您可以使用以下命令弹出项目

yarn eject

请参考此 link 了解更多详情。 https://github.com/facebook/create-react-app

Answer 3

要创建 React 应用程序，请使用 yarn create 命令：

$ yarn create react-app <app_name>

这会自动将 create-react-app 脚本作为全局 yarn 包安装到您的机器上。验证是否正确安装：

$ yarn global list
yarn global v1.22.17
info "create-react-app@4.0.3" has binaries:
  - create-react-app

如果你用npm安装了create-react-app脚本，你可以删除它，只保留一个用纱线安装：

$ npm uninstall -g create-react-app

错误：但是，当您尝试在 macOS 上启动应用程序时可能会遇到以下错误：

$ yarn start
my-app@0.1.0 start
react-scripts start
node:internal/modules/cjs/loader:488
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/zzz/Develop/my-app/node_modules/postcss-safe-parser/node_modules/postcss/package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/zzz/Develop/my-app/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

FIX: 这个错误可能很快就会解决。现在，只需运行软件包升级，然后再次启动应用程序：

$ yarn upgrade

阅读更多信息：https://github.com/facebook/create-react-app/issues/11579

如何使用 yarn 创建 React 应用项目？

How to use yarn to create a React app project?

reactjs

create-react-app

yarnpkg