小编Ken*_*ong的帖子

我有一个单页应用程序,我在每条路线上编码拆分.当我部署新版本的应用时,如果用户仍然打开该页面并访问之前未访问过的路由,则用户通常会收到错误.

另一种情况是,如果应用程序启用了服务工作程序,也会发生这种情况.当用户在新部署后访问页面时,服务工作者将从缓存中提供服务.然后,如果用户尝试访问不在其缓存中的页面,则他们将获得块加载失败.

目前我在我的应用程序中禁用了代码拆分以避免这种情况,但我一直很好奇处理这个问题的最佳方法是什么.我已经考虑过在用户完成加载初始页面后预加载所有其他路由,我相信这可能会解决路由上代码拆分的问题.但是,假设我想对组件进行代码拆分,那么这意味着我必须设法确定何时以及如何预加载所有这些组件.

所以我想知道人们如何处理单页应用程序的这个问题？谢谢!(我目前正在使用create-react-app)

假设我的中有多个软件包yarn workspaces。

@mycompany/utils
@mycompany/app
@mycompany/serv

假设每个软件包都有一个dependencyon lodash。我想确保它们都具有相同的lodash版本。

有没有办法在每个package.json中做到这一点？

有没有办法让它变得总是嘲笑我的模块所以我不需要在我所有的开玩笑测试中包含它？

目前我有一个配置文件

// src/__mocks__/config.js 
export default {
  dbConfig: 'TestDBConfiguration'
};

// src/config.js
export default {
  dbConfig: ... // Some other stuff
};

要运行我的单元测试,我必须使用模拟的config.js.目前在我的所有单元测试中,我必须包括jest.mock('../ config');

// org.test.js
jest.mock('../../config');
import db from '../db';              // This internally uses the config file
import otherFile from '../otherFile'; // This also uses the config file

// Code that calls both db/otherFile

有时当我创建测试时,我可能忘记包含jest.mock('../ config'),这是我希望它包含在我所有测试中的原因之一.

我已经研究过启用automock但它似乎打破了我的测试.https://facebook.github.io/jest/docs/en/configuration.html#automock-boolean

我目前正在使用firebase.auth().createUserWithEmailAndPassword(email, password)身份验证用户并使用JWT令牌来firebase.auth().currentUser.getToken(true)获取API请求.但是,Firebase会在1小时后使令牌无效.所以我想知道如何刷新令牌.我是否必须使用自己的自定义令牌生成来正确使用令牌刷新？

我目前正在使用它,虽然我只测试了一次,但它似乎工作.

firebase.auth().onAuthStateChanged(function () { // Refresh token here })

我一直在阅读文档,并没有看到任何提及为Web Apps刷新令牌的提及.我还查看了firebase的示例存储库,并没有看到任何人使用onAuthStateChanged这样的事情.所以我想知道这是客户端令牌刷新的正确方法吗？我觉得这可能不是最好的方法的原因是因为这可能有竞争条件.例如,如果令牌过期,我在刷新令牌之前使用旧令牌发送API请求,那么我的API请求将因令牌过期而失败.

这与Firebase DB HTTP API Auth中的问题非常相似:何时以及如何刷新JWT令牌？但问题是使用Python而没有提到的问题略有不同onAuthStateChanged.

谢谢!

我创建了这个问题，以防有人对如何在 Apollo 中添加联合/多态类型感到好奇。希望这会让他们更容易。

在此示例中，我希望响应为 aWorksheet或ApiError

// typedefs.js
export default [`
  schema {
    query: Query
  }

  type Query {
    worksheet(id: String!): Worksheet | Error
  }

  type Worksheet {
    id: String!
    name String
  }

  type ApiError {
    code: String!
    message: String!
  }
`];

// resolvers.js
export default {
  Query: {
    worksheet(_, args, { loaders }) {
      return loaders.worksheet.get(args.id).catch(() => {
        // ApiError
        return {
          code: '1',
          message: 'test'
        }
      });
    }
  }
};

// Express Server 
import …

我目前正在导入一个纱线工作区包，该包具有module在 ES6 中定义的字段并使用插件进行 lintingeslint-plugin-import

我的 create-react-app 设置自动使用modulethrough webpack，但 eslint 抱怨@mycompany/utils包未定义。

Unable to resolve path to module '@mycompany/utils'. [import/no-unresolved]

所以我的问题是如何让我的 linter 查看module路径而不是main

这是我用于 utils 包的 package.json

{
  "name": "@mycompany/utils",
  "version": "0.0.2",
  "main": "dist/index.js",
  "module": "src/index.js"
}

我正在尝试学习ReactJS,当涉及到嵌套路由时,新的React路由器真的让我感到困惑.

我想要有三条路线,如下所示 / - home Page /users - list all the users /users/add - add user form

您可以在下面看到完整的代码示例

查看codesandbox.io中的代码

当我点击/或/users它工作正常.但是,当我到达/users/add路由器渲染空白页而不是AddUser组件时.

我知道我可以在index.js中定义绝对路由,就像/users和/users/add.但我有点想要有一种更可维护的方法来定义子组件内的路由器.

知道如何解决这个问题吗？

// src/index.js 
render(
  <BrowserRouter>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/about" component={About} />
      <Route exact path="/users" component={UserLayout} />
    </div>
  </BrowserRouter>,
  document.getElementById("root")
);



class UserLayout extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <div className="users">
          <Route exact path={this.props.match.path} component={Users} />
          <Route path={`${this.props.match.path}/add`} component={AddUser} />
        </div> …

我只想在 Cypress 终端中记录消息，这样它们就不会出现在 Cypress 浏览器命令日志的屏幕截图中，而是可以在 CI 日志中查看。

我尝试使用Cypress.log()，但它将消息记录到终端和浏览器规范，这不是我想要的。这是我目前正在使用的，但它会用 RequestId 日志发送垃圾邮件屏幕截图（我只希望在 CI 终端中使用它）

beforeEach(() => {
  cy.intercept({ url: API_HOST + '/api/**', middleware: true }, req => {
    const requestId =
      // Apollo lower cases the headers before sending the request
      req.headers['x-request-id'] || req.headers['X-Request-Id'];
    if (requestId) {
       Cypress.log({
        name: 'RequestID:',
        message: requestId,
      });
    }
  });
});

我还尝试在 cy.intercept 中使用console.log()，但它仅记录到 Chrome 控制台而不是 Node.js 终端，因此消息不会显示在任何地方。（我注意到，如果我在其他地方的应用程序中使用 console.log ，它会将 console.log 添加到 Node.js 终端中，但特别是在 cy.intercept 中，它不会记录它）

最后，我尝试使用cy.task，

beforeEach(() => {
  cy.intercept({ …