标签: react-scripts

我的 React 日历应用程序在本地开发构建上运行良好，但在部署到 Heroku 时会出现许多分配失败。

以下是 Heroku 日志中的错误：

2021-08-29T06:50:16.143215+00:00 app[web.1]: <--- Last few GCs --->
2021-08-29T06:50:16.143216+00:00 app[web.1]: 
2021-08-29T06:50:16.143232+00:00 app[web.1]: [29:0x59b3ba0]    23626 ms: Mark-sweep (reduce) 253.6 (257.1) -> 251.9 (258.6) MB, 22.3 / 0.0 ms  (+ 868.9 ms in 46 steps since start of marking, biggest step 759.6 ms, walltime since start of marking 919 ms) (average mu = 0.240, current mu = 0.080) alloc[29:0x59b3ba0]    23886 ms: Mark-sweep (reduce) 253.0 (257.6) -> 252.4 (258.1) MB, 255.2 / 0.0 ms  (average mu …

我已经使用编译了我的反应应用程序

react-scripts build

并在App的根目录中生成了一个build \文件夹。我正在使用以下命令运行build \文件夹

sudo serve -T -p 443 build/

由于我传递-T，因此这在https上成功运行了我的React应用程序。但是我需要使用任何可用的模块永久运行我的应用程序。我一直在寻找到节点模块永远与PM2 我试图以如下方式使用PM2：

sudo pm2 serve -T -p 443 build/
It throws:
error: unknown option `-T'

当我使用时：

sudo pm2 serve -p 443 build/
It works on console but I am not able to access my app from URL

react-scripts build

有人可以帮我弄这个吗？或者，如果有其他方法可以永久在生产环境上运行您的React应用。

提前致谢

说webpack的配置如下

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

现在的构建webpack是

和react-scripts构建的构建（静态包含css，js和媒体在单独的文件夹中）

问题：与react-scripts构建相比，webpack有什么特别的优势吗？（包括但不限于性能）

注意：package.json被编辑以实现此目的。

在构建的 React 项目create-react-app中，测试文件位于他们需要测试的代码旁边的同一文件夹中，如下所示：

|- /src/path
|  |- List.tsx
|  |- List.test.tsx

尝试运行npx jest或使用 global 时jest，我得到以下结果：

No tests found
In C:\src\path
  34 files checked.
  testMatch: **\*test.tsx,**/*test.tsx,src\**\*.test.tsx,src/**/*.test.tsx,C:\src\path\src\**\*.test.tsx,C:\src\path\src\**\*.test.tsx - 0 matches
  testPathIgnorePatterns: \\node_modules\\ - 34 matches
Pattern:  - 0 matches

运行npm test-这在转弯运行脚本react-scripts test从package.json-工作正常，并能够找到并运行项目中的所有测试（手表模式）。

知道如何解决这个问题吗？

环境

• 节点： 10.15.0
• npm： 6.4.1
• 反应脚本： 2.1.3
• 操作系统： Windows 10 1809 17763.316

开玩笑的配置文件

module.exports = {
  testMatch: [
    '**\\*test.tsx',
    '**/*test.tsx',
    'src\\**\\*.test.tsx',
    'src/**/*.test.tsx',
    '<rootDir>\\src\\**\\*.test.tsx',
    '<rootDir>/src/**/*.test.tsx',
    'src/.*|(.|/)(.test).tsx?$'
  ],
};

我想运行一个npm start命令来运行我的前端文件夹和后端文件夹。目前，我必须在每个文件夹内导航并分别在两个文件夹上运行命令以查看我的应用程序在本地主机上打开。我已经“同时”查看了包，但是在我的 package.json 文件中实现它时遇到了一些问题。这是我的前端文件夹的 package.json 文件：

"scripts": {
"start": "set HOST = 'http://localhost' && set PORT=8000 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postbuild": "react-snap"

}

在前端运行 npm start 后，我​​尝试使用此位运行后端，但它不起作用：

"start": "set HOST = 'http://localhost' && set PORT=8000 && ../backend/ start & react-scripts start"

编辑：重试后仍有一些麻烦。

这是我的 package.json 文件中的脚本

前端文件夹

"scripts": {
"start": "set HOST = 'http://localhost' && set PORT=8000 && react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject",
"postbuild": "react-snap" …

我正在学习 React，而且我的英语很差。我已经有两个反应项目，但它们也不起作用:(我按照以下步骤操作，

npx create-react-app my-app cd my-app npm start

但它不起作用。我尝试清理缓存并再次安装 npm 但没有成功。我该如何解决这个问题？

> my-app@0.1.0 start /Users/edu/Documents/htdocs/my-app
> react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.5"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher …

我有几个 ReactJS 项目，并且开始拥有很多可重用的组件。我不想将它们发布到npm或将它们与项目根目录下导入的 node_modules目录混合。他们应该去哪里？

我的项目如下所示：

• 项目1/
  • 节点模块/
  • 源代码/
    • 索引.js
    • A.jsx
• 项目2/
  • 节点模块/
  • 源代码/
    • 索引.js
    • A.jsx

A.jsx定义了一个可重用的组件，我只是将文件复制到任何地方......我只想将它放在一个地方，我的项目将它与import A from 'A'.

我尝试创建到A.jsxinsrc/或 in 的符号链接node_modules/，但无法编译，就像react-scripts无法处理它们一样。您是如何解决这个问题的？感谢您的帮助！

我正在使用creacte-react-app 2.0.0-next.66cc7a90，它已经支持 Sass/Scss 文件

但是，使用 Sass/Scss 文件中的默认相对导入，我必须使用类似的代码 @import "../../../../../styles/variables/_variables.scss";

相反，我想使用绝对导入，这样我就可以使用代码导入 @import "styles/variables/_variables.scss";

我知道实现这一目标的一种方法是更新选项

{
   loader: "sass-loader",
   options: {
        includePaths: ["absolute/path/a", "absolute/path/b"]
 }

但我想在不弹出的情况下做到这一点，我该怎么做？使用react-app-rewired？

我希望其他人之前也遇到过这个问题..我在终端中使用 npm start 来运行我的反应项目，该项目通过 localhost:3000 打开，但是我在终端中编写的任何以下命令都不会执行！我希望能够通过 npm start 使用初始化我的项目，在我的文本编辑器中进行更改，然后通过终端将更改提交到 GitHub。任何帮助将不胜感激！谢谢

我有一个带有多个 CRA 应用程序和 Node.js 服务的 Lerna monorepo。CRA 应用程序具有公共环境变量，因此我希望能够创建一个它们共享的 .env 文件。

不幸的是，到目前为止我的两次尝试都失败了。

1. 我想也许我可以添加dotenv到每个 CRA 应用程序并dotenv.config({ path: '...' })在每个应用程序的入口点使用。我很惊讶 env vars 都是未定义的，即使它们以REACT_APP_

2. 我尝试通过将react-scripts start命令更改为.env 来加载共享的 .env react-scripts start -r dotenv/config dotenv_config_path=/custom/path/to/your/env/vars。显然这不起作用，因为 dotenv 不是由节点执行的，但react-scripts没有我可以找到的使用文档，并且查看node_modules/react-scripts/scripts/start.js并没有提供传递参数的明显方法。

所以，我想我的问题是：我可以在多个 CRA 应用程序之间共享一个 .env 文件，而无需为每个应用程序手动弹出和设置 .env 路径吗？如果可能的话，我想避免这种情况。

谢谢！

- 更新 -

我在发布几分钟后找到了解决方案（抱歉！）。

我能够安装 dotenv-cli 并将每个 CRA 应用程序的脚本更改为：

"scripts": {
  "start": "dotenv -e ../../.env react-scripts start",
  "build": "dotenv -e ../../.env react-scripts build",
  "test": "dotenv -e ../../.env react-scripts test", …

我的情况：

我正在托管使用create-react-appSurge 创建的应用。为了让Surge react-router处理路由，我必须在根目录中添加200.html，并且要处理404，必须在根目录中添加404.html。问题在于，npm run build仅使用index.html和将favicon.ico它们添加到构建目录的根目录中。

可能的解决方案：

我可以通过build在package.json中创建脚本来复制其他文件react-scripts build && cp 200.html 404.html build。

题：

有没有更好的方法来react-scripts将额外的文件添加到构建的根目录，而不是依靠package.json中的bash脚本？

这是我在 package.json 中的脚本。我使用 create-react-app 创建了一个项目，并想引入 tailwind。

"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css",
"watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css",
"build": "npm run build:css && react-scripts build",
"start": "npm run watch:css && react-scripts start",

当我运行yarn start 时，应用程序未启动。看来是停在值班时间了。我怎样才能拥有顺风手表并启动应用程序？