在反應入門套件頁面路徑

中查看通過react-starter-kit的示例代碼，require.ensure會做什麼，我對require.ensure([], (require) => resolve(require('./Admin').default), 'admin');的說法感到困惑。我沒有看到require.ensure被定義在任何地方，所以我假設它是一個webpack函數。在反應入門套件頁面路徑

這是一個授權檢查以確保用戶具有管理角色嗎？如果是這樣，那麼用戶信息和角色信息在哪裏被立即執行？

是否只是爲了確保管理組件是實例化的？什麼是.default屬性和什麼是字符串'管理員'用於？

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

};

來源

2016-12-09 MonkeyBonkey

我相信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（）調用，我們可以將它們的代碼組合到一個塊中，從而導致只有一個瀏覽器必須加載的包。

來源

2017-02-22 10:44:12

在反應入門套件頁面路徑

回答

相關問題