标签: react-scripts

我的react客户端文件夹中的我的NPM包给了我63个低漏洞,这些漏洞主要处理版本2.1.5的react-scripts包的jest文件夹中的大括号包.NPM审核修复不起作用,我该怎么办？

我已经尝试降级到以前版本的react-scripts,通过更新package.json,删除包锁,再次运行npm install,或运行npm update braces来更新大括号,但是在2小时的摆弄后没有任何工作.我还尝试在它工作时恢复到我的Github package.json的早期版本.我相信它在我尝试下载firebase-ui后停止工作,但我认为这与更新软件包有关,因为我删除了节点模块和npm安装多次.

这就是我干净的package.json,它搞砸了.

"webpack-dev-server": "3.1.14",
"@babel/core": "*",
"axios": "*",
"body-parser": "*",
"bootstrap": "*",
"cors": "*",
"dotenv": "*",
"draft-js": "*",
"draft-js-export-html": "*",
"errorhandler": "*",
"express": "*",
"express-session": "*",
"history": "*",
"jquery": "*",
"moment": "*",
"mongoose": "*",
"morgan": "*",
"node-sass-chokidar": "*",
"npm-run-all": "*",
"path": "*",
"query-string": "*",
"react": "*",
"react-dom": "*",
"react-loadable": "*",
"react-redux": "*",
"react-router-dom": "*",
"react-router-redux": "*",
"react-scripts": "*",
"react-validation": "*",
"reactstrap": "*",
"recharts": "*",
"redux": "*",
"redux-logger": "*",
"redux-observable": "*",
"redux-thunk": "*",
"rxjs": "*",
"rxjs-compat": …

我不想使用create-react-app. 那么如何为一个简单的 React 应用程序配置一个最小的工作开发环境呢？

注意：我知道我可能只是在运行时将所有内容都包含为 JS（这是有据可查的），但我不想要这个，因为我仍然想要一个可用于生产的版本！

我不想要的：

• 进行任何缩小（请参阅此处的相关问题）
• 进行任何连接（或者，如果更容易做到，我可能会将所有 JS 连接到一个文件中）
• 任何比我编写的 JS 更旧的浏览器支持（所以没有这样做的转译）
• 任何开发服务器（我可以手动重新加载。）
• 任何实时重新加载或高级开发功能

我确实想：

• 使用 React 组件
• （可选）包括 JSX（我知道可以在没有它的情况下使用 React，但假设这是我想从 React 中获得的最小优势。但是，请告诉我，设置/配置的哪些额外步骤会“花费”包括，所以这个答案适用于那些想要 JSX 的人和那些不想要的人。）

基本上，我只想使用 React。没有它周围的所有花哨的其他东西！*

我只是问这个，因为官方 React 文档没有提到这种可能性。

注意：为那些想知道为什么我想要这个的人推理。

* 实际上，忽略这些方便的开发功能等听起来太疯狂了。但我声称这有正当的理由/用例。我的意思是，所有这些对我来说都是不可用的/破坏了东西，因为我正在尝试使用 React 构建浏览器扩展。

是的，我看到了这个非常相似的问题，但不幸的是，用户比我领先一步，答案只是针对他们问题的非常具体的答案。我想先了解一般情况，即我需要什么以及如何设置？

我使用 create-react-app 创建react应用程序并安装react-admin。当我想用yarn start启动开发服务器时，抛出一个错误unhand-led 'error'事件并说命令失败，退出代码1我搜索了很多，但没有任何帮助。请参阅下图中的错误

我目前正在使用"react-scripts build"构建和部署我的create-react-app站点,然后将构建目录的内容复制到apache web目录.web目录包含一个index.html文件,它通过脚本标记指向编译的React js文件,如下所示:

<script type="text/javascript" src="/static/js/main.dd92ea42.js"></script>

这就是"react-script build"的所有内置行为.我发现即使创建了一个新的index.html文件,并且它有内容更改(该.js文件的路径随每次部署而改变),浏览器仍然会缓存整个应用程序.即使对网站进行"硬"刷新也不会加载新内容.我必须完全删除缓存,然后重新加载任何要刷新的东西.

是否有一些技巧来缓存create-react-app并通过react-scripts构建？我假设浏览器只查看index.html文件,如果它没有缓存应用程序,并且再也不会查看它？否则我不明白为什么在重新部署时它没有看到对index.html文件的更改.

那么,部署create-react-app应用程序的诀窍是什么,这样每个部署都会使浏览器的缓存失效,而用户不需要通过环节来获得新版本？

构建后我想要一个根文件夹中的配置文件（JSON）来配置我的应用程序。

像Translation和API Urls和...

我可以使用 create react app 来做到这一点吗？

将react-scripts升级到v5后，craco start无法正常工作。应用程序启动时没有错误，但在浏览器中，有一个空白页面，如果我打开检查器，我只能看到 index.html 代码而不是反应代码。它与react-scripts@4.0.3 配合得很好。这是我的本地文件；

包.json

{
  "name": "test-app",
  "private": true,
  "version": "0.1.0",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "dependencies": {
    ...
    "@babel/preset-react": "^7.16.7",
    ...
    "@craco/craco": "^6.4.3",
    ...
    "babel-loader": "^8.2.3",
    ...
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "^5.0.0",
    "scriptjs": "^2.5.9",
    "single-spa": "^5.9.0",
    "single-spa-react": "^4.6.1",
  },
  "devDependencies": {
    "@babel/core": "7.7.2",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.17.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
    "@svgr/webpack": "6.2.1",
    "@types/chance": "^1.0.8",
    "@types/jest": "^24.9.0",
    "@types/node": "^16.7.10",
    "@types/react": "^16.9.18",
    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.3",
    "@types/yargs": …

我react-scripts-ts用来生成React App并提供TSLint.

似乎没有选择告诉react-scripts-ts从构建管道中排除TSLint.是否可以通过禁用TSLint tslint.json？

PS

可以通过向文件添加注释来禁用它,但我不想将此注释添加到项目中的每个TS文件.

我已经使用设置了一个新项目npx create-react-app my-app --template typescript，并且没有更改任何配置设置。

如果我输入一些存在 TS 错误的代码，我的 IDE（VS Code）将显示该错误。但是，当我运行 start/build 时，我没有收到任何编译错误。

除此之外，npm run build在我们的 GitLab CI/CD 管道上运行时，确实会失败并出现错误。

我检查了我的 TS 版本，无论是在项目中还是我的全局模块所在的位置，都是相同的版本（4.1.3）。

正如我所说，我没有对 create React app 生成的内容进行任何更改，并且我尝试创建一个新项目并获得相同的结果。有人有什么想法吗？

编辑 - 要添加到这一点，如果我tsc在根目录运行，我会收到编译错误，但npm start我不会。

编辑 2 - 这是我在 package.json 中的脚本（与 CRA 提供给我们的内容相同）

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

打字稿抛出：

除非提供了“--jsx”标志，否则无法使用 JSX。ts(17004)

更改tsconfig.json jsx为 后react-jsx，jsx 工作。yarn start将 tsconfig.jsonreact-jsx再次更改为。

react-scripts 已更新至 4.0.1。

包.json

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "semantic-ui-css": "^2.4.1",
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.9",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.8.1",
    "@typescript-eslint/parser": "^4.8.1",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "typescript": "^4.1.2"
  },

配置文件

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": …

react-scripts build我正在使用纱线在私人打字稿存储库上运行。构建失败并显示以下消息：

yarn build -v
yarn run v1.22.17
$ react-scripts build -v
Creating an optimized production build...
Failed to compile.

TS2322: Type 'string | undefined' is not assignable to type 'string | number | boolean'.
  Type 'undefined' is not assignable to type 'string | number | boolean'.
    114 |       withCredentials: true,
    115 |       headers: {
  > 116 |         Authorization: token ? `Bearer ${token}` : undefined,
        |         ^^^^^^^^^^^^^
    117 |       },
    118 |     });
    119 |


error Command failed with …