Question

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

这是一项授权检查，以确保用户具有管理员角色吗？如果是，那么用户信息和角色信息在哪里实现？

它只是为了确保管理组件是实例化的吗？什么是.default属性以及字符串＆＃39; admin＆＃39;用于？

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>,
    };
  },

};

Answer 1

我相信require.ensure适用于webpack'分块'或'代码分割'。基本上，它是一种加载组件的异步方式，因此只为任何给定页面呈现必要的组件。我们不是要求顶部的组件，而是有条件地或仅在某些路线上要求它们。在我们确定用户是管理员之前，我们不想加载'./Admin。有关详细信息，请参阅docs。

这是一项授权检查，以确保用户拥有管理员角色？

我不这么认为;在我看来，这就是if (!isAdmin)。

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

'default'属性表示使用ES6 export default语法导出模块。导出模块的方法不止一种 - 使用module.exports = { ... }或export default class SomeClass { ... }。这是CommonJS和ES6之间差异的一个漏洞（据我所知），但this SO answer可能对你很感兴趣。

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

通过将相同的chunkName传递给各种require.ensure（）调用，我们可以将它们的代码组合到一个块中，从而只生成浏览器必须加载的一个包。

require.ensure在react starter Kit页面路由中做了什么

1 个答案: