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

【问题标题】：How to use yarn to create a React app project?如何使用 yarn 创建 React 应用项目？
【发布时间】：2019-01-21 05:58:10
【问题描述】：

我正在尝试在 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"
  }
}

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

【问题讨论】：

标签： reactjs create-react-app yarnpkg

【解决方案1】：

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

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

yarn create react-app my-app

要启动项目，只需运行以下命令

yarn start

构建项目

yarn build

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

yarn eject

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

【讨论】：

【解决方案2】：

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

yarn start

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

yarn install // or simply, yarn

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

yarn add react react-dom

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

【讨论】：

乐于助人！！

【解决方案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 脚本，则可以将其删除，并仅保留使用 yarn 安装的脚本：

$ 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

【讨论】：