向 React(create-react-app) 添加静默更新入口点

Question

我有一个使用 create-react-app module. I have recently been asked by a client to integrate with oidc. For this purpose I'm using redux-oidc 创建的 React 应用程序，因为我已经在我的应用程序中使用了 redux。

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

目前我创建了一个名为 silent_renew 的文件夹，其中包含一个 index.js 文件。此文件夹还包含一个 silent_renew.html 文件，其中内容不多（参见：example app 类似于我的文件夹结构）。

Answer 1

如果您还没有弹出，则无法添加自定义 webpack 加载程序：

We don't intend to provide Webpack specific overrides because it will be very fragile. People will start depending on specific loaders and plugins and we won't be able to improve the overall experience.

来源：https://github.com/facebookincubator/create-react-app/issues/99#issuecomment-234657710

如果您想添加一个新的特定条目文件，您首先需要 yarn eject 然后编辑 config/webpack.config.dev.js:34 和 config/webpack.config.prod.js:55。这同样适用于添加新的 webpack 加载器。

Answer 2

如前所述，更改 create-react-app 的 webpack 配置将违背该项目的目的，提供一种零配置 React 的方法。

恐怕解决方案是弹出您的应用程序，这是不可逆的。

这样做之后，使用 index.js 和 index.html 文件在项目的根目录下创建 silent_renew 目录，为 redux 创建一个 store ，如图所示 here (you probably don't need a lot of this stuff, like sagas, the router and logger middleware, just take the loadUser logic and store creation), import the store in the src/index.js file and create a redux Provider, like this.

然后，您可以修改 config/webpack.config.dev.js 并按照我们在 redux-oihc-example webpack conf 中看到的内容进行操作。为 silentRenew 添加 HtmlWebpackPlugin 和 CommonsChunkPlugin，以及额外的入口点。

CRA 有点令人沮丧的是，他们针对开发和生产的 webpack 配置是完全分开的，并且没有扩展共享配置。您必须在生产配置和开发配置中执行此操作，或者扩展另一个配置文件以防止冗余，例如 this。

我还建议您使用另一个简单的脚手架，当您没有任何与您想要的不同的特殊事情要做时（将来可能会更多），CRA 非常有用。弹出将创建大量您在自己的代码库中甚至不需要的文件和代码。我和一个朋友做了一个 minimalist one，但我相信还有很多更好的选择。

Answer 3

由于 silent_renew 的着陆页只是一个简单的 html 页面，您可以绕过 webpack。只需将以下文件放在 public 文件夹中。此外，在同一文件夹中包含 oidc-client.min.js 库的副本。

public/silent_renew.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script src="oidc-client.min.js"></script>
  <script>
      new Oidc.UserManager().signinSilentCallback().then()
  </script>
</body>
</html>

这在我的站点的开发配置中有效。对于生产配置，我有以下想法（我还没有测试它，但我非常有信心这是前进的方向......）。

public/index.js

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static('.'))

app.use((req, res, next) => {
  if (path.extname(req.path).length > 0) {
    next()
  } else if (path.dirname(req.path).indexOf('silent_renew') > -1) {
    req.url = '/silent_renew.html'
    next()
  }
  else if (path.dirname(req.path).indexOf('callback') > -1) {
    req.url = '/callback.html'
    next()
  } else {
    req.url = '/index.html'
    next()
  }
})

app.listen(3000)

一旦 create-react-app 支持多个入口点（我希望企业登录场景的这种情况很快就会发生），此代码就会过时。

Answer 4

您也可以采用在 iframe 中加载主包的方法，并捕获 here 中提到的路径。

然后你就不需要处理暴露路径来加载 oidc 客户端库（oidc-client.min.js 或 redux-oidc.js）或将它的内容转储到某处。

索引。js/ts

import * as React from 'react';
import { render } from 'react-dom';
import { processSilentRenew } from 'redux-oidc';
import App from './App';

if (window.location.pathname === '/silent-renew') {
  processSilentRenew();
} else {
  render(<App />, document.getElementById('root'));
}

请注意，/silent-renew 请求性能可能会受到与应用程序一起加载的大文件的潜在 负面影响 。 comment.

中对此的一些想法

Answer 5

我通过简单地添加一条路由而不是使用单独的端点来让它工作。我的设置是一个带有 redux、redux-oidc 和 react-router 的 create-react-app。

我将 UserManager 配置为使用

{
    silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}/silent_renew`
}

我在我的反应路由器中添加了这条路线：

<Route exact={true} path={"/silent_renew"} component={SilentRenewComponent} />

SilentRenewComponnent是一个简单的函数组件，它调用redux-oidc函数来处理重定向。

import React from "react";
import { processSilentRenew } from "redux-oidc";

export const SilentRenewComponent = () => {
    processSilentRenew();
    return(
        <div>SilentRenewComponent</div>
    );
};

向 React(create-react-app) 添加静默更新入口点

Adding silent renew entry point to React(create-react-app)

javascript

reactjs

webpack

create-react-app