标签: react-app-rewired

我们在一个非常大的单体上使用create-react-app(with react-app-rewired)。我们对构建时间做了一些改进（将其缩短到大约 20 秒），但是在构建完成后（按照 a yarn start），应用程序需要 2 分钟才能真正加载到浏览器上。

在app.jsx我尝试删除所有根代码并仅呈现典型的“Hello World”p标签时，它几乎不需要那么长时间。我还使用serve在构建文件夹前面运行了一个基本的 Web 服务器，这表明它可能webpack-dev-server存在应用程序大小问题（或者可以说它是在实际构建之前构建的？）。

在 chrome 开发工具网络选项卡中，阻止页面加载的资产是static/js文件夹中的文件。

这是结果的要点webpack-bundle-analyzer

有没有人知道这个问题的起源以及如何改善构建后加载时间？

我想将 Monaco Editor 版本升级到 v0.31.1。我这样做了npm install monaco-editor@0.31.1，重新编译sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-app-rewired start给了我以下错误：

Failed to compile.\n\n./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 154:11\nModule parse failed: Unexpected token (154:11)\nFile was processed with these loaders:\n * ./node_modules/babel-loader/lib/index.js\nYou may need an additional loader to handle the result of these loaders.\n|     dispose() {\n|       onLanguageListener.dispose();\n>       mode?.dispose();\n|       mode = void 0;\n|     }\n

有人可以帮忙吗？

编辑1：package.json升级前\n ：

Failed to compile.\n\n./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 154:11\nModule parse failed: Unexpected token (154:11)\nFile was processed with these loaders:\n * ./node_modules/babel-loader/lib/index.js\nYou may need an …

根据本文档，我在根目录中创建了一个 jsconfig.json 文件，以便能够在我的 React 应用程序（使用 create-react-app 设置）中使用绝对路径导入组件。不幸的是这不起作用。我尝试安装react-app-rewired 和react-app-rewire-alias 来尝试相同的操作，但没有成功。任何帮助，将不胜感激。

以下是我的 jsconfig.json 文件：

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
}

以及引发错误的文件（src/Components/Pages/Login/LoginForm）

import React from 'react'
import './Login.css'

import ToggleButton from '@material-ui/lab/ToggleButton'
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'

import IconButton from '@material-ui/core/IconButton'
import Button from '@material-ui/core/Button'
import Input from '@material-ui/core/Input'
import OutlinedInput from '@material-ui/core/OutlinedInput'
import InputLabel from '@material-ui/core/InputLabel'
import InputAdornment from '@material-ui/core/InputAdornment'
import FormControl from '@material-ui/core/FormControl'
import TextField from '@material-ui/core/TextField'

import {MdVisibility, MdVisibilityOff} from 'react-icons/md'
import { FormHelperText } from '@material-ui/core'

import …

我正在尝试设置 monorepo 以立即运行所有 Jest 测试。在每个包中，我都使用react-app-rewired来让 Babel 转译从其他包导入的代码，而无需从 create-react-app 中弹出，如本文所述。

react-app-rewired test从每个包文件夹运行时成功，但从 monorepo 的根文件夹运行时，出现此错误

Directory /Users/Me/go/src/gitlab.com/my-org/front-end/src in the roots[0] option was not found.

src我的文件夹（monorepo 根目录）中没有文件夹front-end，我不明白为什么 Jest 试图在那里查找。

我尝试过提供rootDirand rootsin jest.config.js，但这似乎没有什么区别。

如何让 Jest 停止查找不存在的文件夹？

jest.config.js（根）：

module.exports = {
  rootDir: ["."],
  projects: [
    "<rootDir>/packages/app",
    "<rootDir>/packages/components",
    "<rootDir>/packages/utils",
  ],
};

package.json（根）：

{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier …

create-react-app version

react: v17.0.1\nreact-scripts: v4.0.1 \n

故事书版本

@storybook/react: v6.1.6\n@storybook/addon-docs: v6.1.6\n@storybook/core: v6.1.6\n

我可以运行yarn start反应应用程序并且可以运行start-storybook -p 9009 -s public to start storybook.

当涉及到构建 React 应用程序时，就会出现问题。往下看。

\n
1. 当运行“yarn run build”时，它实际上运行react-app-rewired start.
\n
2. 它显示在下面
\n

There might be a problem with the project dependency tree.\nIt is likely not a bug in Create React App, but something you need to fix locally.\n\nThe react-scripts package provided by Create React App requires a dependency:\n\n  "babel-loader": …

目前我正在使用 Create React App 的默认 webpack 配置进行 babel 转译。看来默认的 babel-loader （在 CRA 配置中）使用“babel-preset-react-app”。现在我想要的只是阻止 JS 文件转译为 ES5，因为我不需要支持 Internet Explorer。我希望这会给构建时间带来一些好处。

正在使用的版本：

• 网页包 4
• 通天装载机 8
• 反应应用程序重新连线 2.1
• 定制-cra 0.9

我正在使用带有打字稿的 create-react-app 模板。在我的本地电脑上，运行构建成功，但是在 CI 服务器上运行时，构建失败。

• 构建错误

./src/store/redux/info/index.ts 语法错误：Cannot read property 'name' of undefined (0:undefined)

但是文件中没有“名称”属性

信息/索引.ts

export { default } from "./reducer";
export * from "./actions";
export * from "./types";

 "react": "16.12.0",
 "react-app-rewired": "2.1.5",
 "antd": "3.26.5",
 "antd-theme-webpack-plugin": "1.3.0",
 "typescript": "3.7.4",

    "build": "react-app-rewired --max-old-space-size=8192 build",

我在 package.json 中有以下内容

"@types/google.maps": "~3.48.3",

// 在我的 tsx 文件中，顶部的第一行是

/// <reference types='google.maps' />

但是在访问 google.maps.MapMouseEvent 时 - 我收到错误“google”未定义。第 980:43 行：“google”未定义 no-undef

980 号线是

onMarkerDragEnd = async (mapMouseEvent: google.maps.MapMouseEvent) => {

//我也尝试过

/// <reference path='../../../../node_modules/@types/google.maps' />

// 我也在 tsconfig.json 中尝试过

  "compilerOptions": {
    "types": [
      "google.maps"
    ]
  }

但错误仍然存​​在。我正在使用编译打字稿

react-app-rewired build

寻找有关如何在打字稿中使用 @types/google.maps 的任何提示。

我需要执行 tree-shaking 来减少使用 lodash 和其他一些库的包大小。我已经像这样转换了所有 lodash 导入： import {isEmpty} from "lodash"; 但包大小仍然没有减少。

要使用像“ ”这样的插件lodash-webpack-plugin，我们需要在 中进行配置webpack.config.js，这在 create-react-app 项目中是不可能的。我尝试使用react-app-rewired但遇到以下问题： 错误屏幕截图

项目中使用以下版本：

1. 反应脚本：3.4.1
2. 网络包：4.42.0
3. 反应：16.13.1
4. 洛达什：2015年17月4日