标签: create-react-app

当我在 docker-compose.yml 文件中声明环境变量时遇到问题，但是当我尝试读取它们时，我得到“未定义”。

我的步骤：

我使用“创建反应应用程序”创建了一个反应应用程序，然后运行“弹出”（但尚未更改任何内容）。另外，我将 Ngix 添加到了 docker 中。

然后我创建了一个 Dockerfile 并将其添加到根目录：

FROM node:alpine

WORKDIR '/app'

COPY ./package.json ./

RUN npm i

COPY . .

CMD ["npm", "run", "start"]

然后我创建了 docker-compose.yml 文件：

version: '3'
services:
  nginx:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - '3050:80'
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
      args:
        - MAXIMUM_CAMERAS_COUNT=9
    volumes:
      - /app/node_modules
      - ./client:/app

然后我执行“docker-compose up --build”，它工作正常。
但是当我在应用程序中的某个地方执行操作时：

console.log('process.env.MAXIMUM_CAMERAS_COUNT:', process.env.MAXIMUM_CAMERAS_COUNT);

我得到“未定义”。

已经尝试过：
-添加到 Dockerfile：

ARG MAXIMUM_CAMERAS_COUNT
ENV MAXIMUM_CAMERAS_COUNT $MAXIMUM_CAMERAS_COUNT

在 docker-compose.yml 中：

  args:
    - …

我们正在使用 create react app 并将源 js 文件转换为块。但我可以看到 chrome 检查源选项卡显示了实际代码。这是预期的行为吗？或者我需要进一步配置任何构建配置吗？我附上了结果的图像。

当我尝试在我的 Windows 机器上创建 React 应用程序时，我不断获得未经授权的访问。我没有在 Mac 上遇到过这种行为，所以我真的不知道是什么导致了这个问题。

在 VS Code 的终端中，我运行了以下命令：

PS C:\Users\Foo_Bar\sandbox> npm install -g create-react-app
C:\Users\Foo_Bar\AppData\Roaming\npm\create-react-app -> C:\Users\Foo_Bar\AppData\Roaming\npm\node_modules\create-react-app\index.js
added 91 packages from 45 contributors in 6.923s

PS C:\Users\Foo_Bar\sandbox> create-react-app --version 
create-react-app : File C:\Users\Foo_Bar\AppData\Roaming\npm\create-react-app.ps1 ca 
nnot be loaded because running scripts is disabled on this system. For more information, see 
 about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ create-react-app --version
+ ~~~~~~~~~~~~~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
PS C:\Users\Foo_Bar\sandbox> create-react-app test-app
create-react-app : …

我已经创建了一个应用程序，npx create-react-app my-app --typescript我想对其进行配置，以便我的应用程序在打字稿错误的情况下仍然可以编译，以便我可以在准备好时返回它们。

我没有看到任何compilerOptions这方面的内容。是否可以？

使用 创建一个新的 ReactJS 应用程序后npx create-react-app testapp，该命令npm start（或任何其他 npm 脚本）在我的任何React项目中都不起作用。它不向控制台提供任何输出，并且其中的日志文件~/.npm/_logs/与该start命令无关。

我尝试过的事情：

• 升级 nodejs 和 npm
• 删除package-lock.json并node_modules/运行npm install（它工作得很好，但不能解决问题npm start）
• 重新启动内核 ( 5.3.12-arch1-1)

附加信息：

node -v = 13.3.0

npm -v = 16.13.1

这是package.json最近创建的应用程序：

{
  "name": "react-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": …

如何为单个视图在本地导入样式表。

我有两个视图/home和/blog以下文件目录：

src
?  
????components       
      ?
      ????Home
      ?     Home.js
      ?     Home.css
      ????Blog
            Blog.js
            Blog.css

我有一个单独的 css 文件home.css仅用于主页视图，但该样式也应用于博客视图。

我希望home.css文件仅适用于home.js视图。

主页.css

.text1 {
   font-size: 1em !important;
   font-family: "Noto Sans", sans-serif !important;
   color: red;
 }

主页.js

import React, { Component } from "react";
import "./home.css";

class Home extends Component {
  render() {
    return (
      <div className="text1" style={{ overflow: "Hidden" }}>
        <h1>This must be red.</h1>
        <a href="/blog">Go to Blog</a>
      </div> …

基于https://github.com/facebook/create-react-app我运行：

npx create-react-app my-app

但我收到此错误：

error An unexpected error occurred: "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz: unable to get local issuer certificate".

我一周前试过它，它适用于另一个项目。现在它似乎不再起作用了。未创建文件夹结构。

我试图将 strict-ssl 设置为 false，但它没有解决问题。有什么建议吗？

我开始学习一个框架我只是好奇我是否需要互联网连接来使用 create-react-app

我有一个带有多个 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", …

考虑以下代码：

import React from "react";

function App() {
  console.log("render");

  setTimeout(() => {
    console.log("time is up");
  }, 2000);

  return <div>nothing to see here</div>;
}

export default App;

我期望以下输出：

render
time is up

但是Chrome 控制台中的真实输出是：

注意2before time is up，向我们显示time is up输出了两次。

我不明白为什么时间到了会输出两次。谁能解释一下？