关于umi的入口文件

由于要引入全局配置，并且在打包后仍然能够修改，那么就应该在入口文件处增加配置的引用，这样每次更改配置，项目会重新读取配置展示界面。

在public文件夹下面没有看到index.html的入口文件，我就很好奇这个入口的模版到底写到哪里了，难道是没有入口吗？

可以在page文件夹下看到有一个模版文件，应该是按照这个生成的一个入口文件

但是在哪里配置的呢？难道是自动引入的?

查了一圈没有找到具体的引入，在网上查一下其他资料才发现以下的答案

在 Umi 中，document.ejs 文件会在构建过程中被引入并用作 HTML 模板，但你不需要在项目中显式地引入它。Umi 会自动识别项目中是否存在 document.ejs 文件，并在构建时将其用作 HTML 模板。

具体来说，当你使用 umi build 命令构建项目时，Umi 会检查项目中是否存在 document.ejs 文件，如果存在，则会将其用作 HTML 模板，并根据此模板生成最终的 HTML 文件。

确实不需要再重新配置，umi会自动引入该文件作为入口文件

加入配置文件

新建一个config.js来放置配置文件

在模版入口文件document.ejs中去引入config

启动成功后可以在源代码中看到已经被引入了

解决引入报错

这是尝试在umi的配置文件中引入声明好的全局变量，但是意外的发现启动项目的时候会发生报错，提示window is not defined

在 Umi 项目中，如果在导出模块时直接使用 window 对象，会导致在服务端渲染时出现 window is not defined 的错误，因为在 Node.js 中没有 window 对象。

因为我在导出模块中直接使用了window，这种做法是不允许的，所以会出现报错，把需要用到window上面的变量提取出来到外部做逻辑

if (typeof window !== 'undefined') {
  global=window.global_
  title = window.global_.version === 'xx' ? 'x' : 'xxx';
  logo = window.global_.version === 'xx' ? '/LOGO-hb.png' : '/LOGO.png';
}

把需要用window赋值的变量提取一下到外面，最后直接赋值即可，这个导出的模块就不会包含window变量了。

  global:global,
  logo:logo,
  iconfontUrl: '',
  tabsLayout: true,
  ...
};

获取config配置

在app.tsx中可以直接读取到window的变量，由于我这边是umi开发的，所以把读取的变量赋值到defaultSetting中，其他文件就能直接读取到。

在不用重新启动项目的情况下，去修改configjs的文件，也就是里面的版本配置，可以发现app.tsx读取的也是最新的版本配置

利用这个特性和configjs不会被打包的特点，可以顺利的对React打包后的包进行不同的版本配置，实现不同版本的功能。

如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

往期好文推荐