Webpack 需要什么。请确保在react starter kit(反应启动器套件)页面中执行

Webpack 需要什么。请确保在react starter kit(反应启动器套件)页面中执行,webpack,react-starter-kit,Webpack,React Starter Kit,查看react starter工具包中的示例代码,我对语句require的内容感到困惑。确保([],(require)=>resolve(require('./Admin').default),'Admin')可以。我看不出require.sure是在任何地方定义的,所以我假设它是一个webpack函数 这是授权检查,以确保用户具有管理员角色吗?如果是,用户信息和角色信息在哪里实例化 是否只是为了确保管理组件已实例化?.default属性是什么?字符串“admin”的用途是什么 import R

查看react starter工具包中的示例代码,我对语句
require的内容感到困惑。确保([],(require)=>resolve(require('./Admin').default),'Admin')可以。我看不出require.sure是在任何地方定义的,所以我假设它是一个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>,
    };
  },

};
从“React”导入React;
从“../../components/Layout”导入布局;
const title='管理页面';
const isAdmin=false;
导出默认值{
路径:'/admin',
异步操作(){
如果(!isAdmin){
返回{重定向:'/login'};
}
const Admin=等待新承诺((解决)=>{
require.确保([],(require)=>resolve(require('./Admin')。默认值),'Admin');
});
返回{
标题
chunk:'admin',
组成部分:,
};
},
};

我认为
需要。请确保
用于网页“分块”或“代码拆分”。基本上,这是一种异步加载组件的方式,以便只为任何给定页面呈现必要的组件。我们不需要在顶部使用组件,而是有条件地或仅在某些路线上使用它们。在这里,我们不想加载
。/Admin
,除非我们确定该用户是管理员。有关更多信息,请参阅

这是授权检查,以确保用户具有 管理员角色

我不这么认为;在我看来,
如果(!isAdmin)
就可以这样做

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

};
“default”属性表示模块是使用ES6
export default
语法导出的。导出模块的方法不止一种-使用
module.exports={…}
,或者使用
export default class SomeClass{…}
。这有点像是对CommonJS和ES6之间差异的一个兔子洞(据我所知),但可能会引起您的兴趣

至于
“admin”
字符串,这是“区块名称”。同样来自文档:

通过将相同的chunkName传递给各种require.sure()调用,我们可以将它们的代码组合成一个块,从而只生成浏览器必须加载的一个包


FWIW:
require。确保现在将
视为旧版,建议使用与ES2017一致的较新的
import()
语法进行动态导入。参考: