标签: create-react-app

我有一个使用create-react-app模块创建的React应用程序.我最近被客户要求与oidc集成.为此我正在使用redux-oidc,因为我已经在我的应用程序中使用了redux.

我们设法将我的应用程序集成到他们的身份服务器中,我能够登录并获取存储在redux中的用户令牌.问题是我正在努力在我的create-react-app应用程序中设置静默更新,因为我必须添加一个额外的入口点.有没有办法在silent_renew/index.js不弹出create-react-app的情况下添加额外的入口点？

目前我已经创建了一个名为silent_renew的index.js文件夹,其中包含一个文件.此文件夹还包含一个silent_renew.html文件不多的文件(请参阅:示例应用程序类似于我的文件夹结构).

用create-react-app和运行创建新项目后yarn eject.

我的package.json的依赖项部分如下所示:

  "dependencies": {
    "autoprefixer": "7.1.1",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.0.0",
    "babel-preset-react-app": "^3.0.1",
    "babel-runtime": "6.23.0",
    etc.

我会说这些都是devDependencies为什么create-react-app将它们放在这里？

我是新手create-react-app。我想知道为什么打开index.html表单构建不起作用？？我知道serve -s build应该使用服务构建，但我想知道为什么构建反应应用程序不能在没有服务的情况下启动。

我将进一步解释：我所做的是......

1. create-react-app helloworld
2. 进行一些代码更改并验证应用程序运行正常。
3. npm run build或者yarn run build...现在我将在其中./build创建我的目录index.html。
4. 现在我只是index.html在浏览器中打开它不会工作。

我想了解为什么这不起作用？为什么我必须为构建提供服务才能使其工作？

我想开始一个同时具有web和reactnative接口的新应用程序.

我决定将所有业务 - 非环境依赖代码转移到第三个包-aka sdk-我可以在两者之间共享反应和反应原生.

所以我的项目现在有4个模块

1. 网络 - 用cra创建
2. Sdk - 主要是redux + redux saga +反应容器+ Hoc's
3. 移动 - 反复原生

4. 服务器 - nodejs表达api.

   • 所有的网络,移动和服务器都将依赖于Sdk模块.
   • sdk模块将依赖于服务器模块 - 主要是为了暗示模拟和数据接口.

有没有标准的方法来实现这样的结构？

我很可能会喜欢

• 使用纱线工作区将所有节点模块提升到一个文件夹中,以避免在每个项目中重新安装包
• 我将同时在所有4个项目中工作,所以我需要hotreload才能意识到这一点.

**面临的挑战**

1. Cra不会在src文件夹之外转换代码,所以虽然web项目确实刷新,但是我在sdk上做了更改.它无法理解es6代码.
2. Jest也不了解node_modules中的es6

如何在同时处理sdk和Web模块的同时避免重建步骤？

我目前正在使用create-react-app我的一个项目来引导它.基本上,我试图在tsconfig.json中设置路径,方法是将它们添加到create-react-app生成的默认tsconfig.json中:

"baseUrl": "./src",
"paths": {
  "interfaces/*": [
    "common/interfaces/*",
  ],
  "components/*": [
    "common/components/*",
  ],
},

但是,每次运行yarn start基本上都运行时react-scripts start,它会删除我的更改并再次生成默认配置.

如何告诉create-react-app使用我的自定义配置？

我正在使用 axios.create() 传入一个 baseURL 和一些像这样的默认查询参数

axios.create({
    baseURL: 'http://somebigurlhere',
    params: {
        part: 'part',
        maxResults: 5,
        key: 'key'
   }
});

当我使用

axios.get('/search', {
    params: {
        q: 'word'
    }
});

默认参数不会在 GET 调用中合并。

我得到的是 http://somebigurlhere/search?q=word

代替 http://somebigurlhere/search?part=part&maxResults=5&key=key&q=asd

我尝试以许多其他方式放置配置，但它仍然不起作用。我在这里做错了吗？

我在其他项目中尝试过同样的方法，它在那里工作。刚刚用 create-react-app 创建了一个新的反应应用程序，这似乎不再起作用了。

在使用 CRA v.1 创建的应用程序中，我需要运行特定的测试文件。我该怎么做？有一个--testPathIgnorePatterns标志可以添加到npm test脚本中以忽略文件或路径，但是如何从命令行使用 CRA 运行特定的测试文件？

npm run build创建项目的生产版本。我如何创建开发版本？我正在使用gradle-node-plugin来构建工件。该项目具有标准的create-react-app配置。

我正在尝试按照这些说明使用打字稿模板创建一个新项目。

npx create-react-app app-ui --template typescript

尽管它安装了所有节点模块，但它不会创建启动项目，也不会使用提供的模板。我收到这条消息：

A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

我正在尝试按照说明删除 cli 的全局安装，但这也不起作用：

 npm uninstall -g create-react-app
 up to date in 0.037s

无论我做什么，我都无法卸载 cli。到底是怎么回事？

编辑：

我能够让它在 PC 上部分工作。

npm remove create-react-app

然后

npx create-react-app my-app [--template typescript]

我尝试使用括号，虽然模板项目在那里，但它不在打字稿中。现在 cli 有问题。

编辑：

这篇文章解决了无法卸载cli的问题。希望这对某人有所帮助，并请为 OP 投票。

我已经升级到最新的 Create React App 4.0。现在scss无法解析公共文件夹中的图像资产。我之前使用的是 CRA 3.4.1。它工作得很好。

有任何想法吗？我不想使用npm eject

icon.svg 在 public/images

background-image: url(/images/icon.svg);

Failed to compile.

./src/Components/style.scss 
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''

在 Create React App 3.x 中，从(S)CSS 中的公共文件夹中引用图像只需使用起始斜杠即可，如已回答here。

正如 OP 所解释的那样，图像在public/images并被引用为url(/images/icon.svg).

这不再适用于 Create React App 4.0.0 并给出错误消息Error: Can't resolve '../../../../../../icon.svg' in ''。Create React App的更新日志没有提到有关公共文件夹的重大更改。