标签: create-react-app

我知道manifest.json用于chrome扩展,但在这里它是其他东西.它的文件代码:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

当我更改某个值,页面更新,但没有任何变化.

我有一个用 create React app 制作的 React 应用程序，热重载完全杀死了页面并出现错误：

Uncaught ReferenceError: process is not defined

奇怪的是，似乎注入了一个我以前从未注意到的 iframe：

当我重新加载并破坏页面并阻止更新时，该 iframe 就会添加到 DOM 中。我在网上找不到任何有关“iframe-bundle.js”的文档。

编辑：我尝试删除我的节点模块和任何有问题的导入（我craco之前临时安装了）。还是同样的问题。真是太烦人了！

编辑 2：如果我删除该 iframe，一切似乎都会恢复正常，即页面更新并且可交互

我在create-react-app中使用以下环境变量:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

当我npm start通过读取.env文件运行时它可以工作:

REACT_APP_API_URL=http://localhost:5555

如何设置不同的值,如http://localhost:1234执行npm run build？

这是我的package.json档案:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我有一个带有API路径的烧瓶后端,可以通过使用create-react-app样板创建的React单页面应用程序访问.当使用create-react-app内置开发服务器时,我的Flask后端工作,没问题.

现在,我想npm run build从我的Flask服务器提供构建(使用)静态反应应用程序.构建react应用程序会导致以下目录结构:

- build
  - static
    - css
        - style.[crypto].css
        - style.[crypto].css.map
    - js
        - main.[crypto].js
        - main.[crypto].js.map
  - index.html
  - service-worker.js
  - [more meta files]

通过[crypto],我的意思是在构建时生成的随机生成的字符串.

收到index.html文件后,浏览器会发出以下请求:

- GET /static/css/main.[crypto].css
- GET /static/css/main.[crypto].css
- GET /service-worker.js

我的问题是:我应该如何处理这些文件？我想出了这个:

from flask import Blueprint, send_from_directory

static = Blueprint('static', __name__)

@static.route('/')
def serve_static_index():
    return send_from_directory('../client/build/', 'index.html')

@static.route('/static/<path:path>') # serve whatever the client requested in the static folder
def serve_static(path):
    return send_from_directory('../client/build/static/', path)

@static.route('/service-worker.js')
def serve_worker():
    return send_from_directory('../client/build/', …

Facebook提供了构建反应应用程序的create-react-app 命令.当我们运行时npm run build,我们看到/build文件夹中的输出.

npm run build

将生产应用程序构建到构建文件夹.它正确地将React捆绑在生产模式中并优化构建以获得最佳性能.

构建被缩小,文件名包含哈希.您的应用已准备好部署!

我们如何使用自定义文件夹而不是/build输出？谢谢.

我想知道是否有人知道如何在dev上使用https来实现'create-react-app'环境.我在README或快速谷歌搜索中看不到任何相关内容.我只想要https:// localhost:3000工作,或者https:// localhost:3001.

我正在使用create react app来引导我的应用程序.

我已经添加了两个.env文件.env.development,并.env.production在根.

我的.env.development包括:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

当我使用react-scripts start和控制台运行我的应用程序时,process.env它会吐出来

{ NODE_ENV: "development", PUBLIC_URL: "" }

我尝试了不同的东西,但它只是没有拿起我的开发文件中的变量,我做错了什么？!

Directry结构是:

/.env.development
/src/index.js

Package.json脚本是:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

编辑:

@jamcreencia正确指出我的变量应该加上前缀REACT_APP.

编辑2

如果我命名文件,它可以正常工作,.env但如果我使用.env.development或者.end.production

我尝试着

PUBLIC_URL=http://example.com npm run build

使用最新的create-react-script构建的项目.

但是,public/index.html中出现的%PUBLIC_URL%将替换为空字符串,而不是期望值PUBLIC_URL.

public/index.html包含类似的代码

<script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script>

搜索互联网和堆栈溢出的时间表明,关于PUBLIC_URL的文章很少.我从git hub克隆了create-react-app并且一直在浏览代码,但还没有被开悟.

有没有人对我做错了什么有任何建议？

是否可以将TypeScript与create-react-app一起使用？如果是这样,你会怎么做？

我试图找出NextJs和Create React App之间的区别。我知道在使用ReactJs开发我们的前端应用程序时，两者都可以让我们的生活更轻松。

在谷歌上浏览了一些文章后，我发现主要的区别是

NextJs 提供服务器端渲染（SSR），而 Create React App 提供客户端渲染（CSR），SSR 提高应用程序加载的性能。

但是从开发的角度来看其他参数呢

使用 NextJS 或 CRA 开发的 Web App 的可维护性和可扩展性？

打字稿和 React Hooks/Redux 支持?

或者，如果我做错了比较，您甚至可以指导我？