5

查看 react-starter-kit 中的示例代码，我对语句的require.ensure([], (require) => resolve(require('./Admin').default), 'admin');作用感到困惑。我没有看到 require.ensure 在任何地方定义，所以我假设它是一个 webpack 函数。

这是确保用户具有管理员角色的授权检查吗？如果是这样，用户信息和角色信息在哪里被实例化？

是否只是为了确保管理组件被实例化？什么是.default属性以及字符串“admin”的用途是什么？

import React from 'react';
import Layout from '../../components/Layout';

const title = 'Admin Page';
const isAdmin = false;

export default {

  path: '/admin',

  async action() {
    if (!isAdmin) {
      return { redirect: '/login' };
    }

    const Admin = await new Promise((resolve) => {
      require.ensure([], (require) => resolve(require('./Admin').default), 'admin');
    });

    return {
      title,
      chunk: 'admin',
      component: <Layout><Admin title={title} /></Layout>,
    };
  },

};
4

1 回答 1

3

我相信require.ensure是针对 webpack 的“分块”或“代码拆分”。基本上，它是一种异步加载组件的方式，因此只有必要的组件才会为任何给定页面呈现。我们不需要顶部的组件，而是有条件地或仅在某些路线上需要它们。'./Admin在我们确定用户是管理员之前，我们不想加载。有关更多信息，请参阅文档。

这是确保用户具有管理员角色的授权检查吗？

我不这么认为；在我看来，这已经完成了if (!isAdmin)。

什么是 .default 属性，字符串 'admin' 的用途是什么？

'default' 属性表示模块是使用 ES6export default语法导出的。导出模块的方法不止一种 - withmodule.exports = { ... }或 with export default class SomeClass { ... }。这是 CommonJS 和 ES6 之间差异的一个兔子洞（据我所知），但这个 SO 答案可能会让您感兴趣。

至于'admin'字符串，那就是“块名称”。再次来自文档：

通过将相同的 chunkName 传递给各种 require.ensure() 调用，我们可以将它们的代码组合成一个单独的块，从而使浏览器只需要加载一个包。

于 2017-02-22T10:44:12.600 回答