Skip to main content

入口文件分析

入口文件获取

可以到看到页面的所有内容都渲染在id=root的元素下面，通过这个html的关键元素，我们找到document.ejs

文件地址：/packages/app/client/src/pages/document.ejs
<div id="root"></div>
<script>
  var match = location.pathname.match(/^\/apps\/([^/]*)\//);
  window.routerBase = match ? match[0] : "/";
</script>

但是在这个文件并没有看到任何引入script标签的代码，我还是无从得知是如何将内容插入到root下面的

继续寻找可以发现，pages同级有一个.umi文件夹，由此可知可能是.umi做了一些操作造成的。

通过查看umi官网配合他的 /packages/app/client/.umirc.ts文件，我们可以知晓

  1. document.ejs 是 umi的默认模版，root是umi规定的默认根节点
  2. 路由为 / 会访问 pages/index
routes: [{ path: '/', exact: false, component: '@/pages/index' }],

由此，我们重点需要查看page/index文件

import '@/theme';
import { Application } from '@nocobase/client';

export const app = new Application({
  apiClient: {
    baseURL: process.env.API_BASE_URL,
  },
  dynamicImport: (name: string) => {
    return import(`../plugins/${name}`);
  },
});

export default app.render();

可以看到，它调用了@nocobase/client下的Application方法