umi.js的document.ejs中如何引用配置变量

﹏ヽ暗。殇╰゛Y 2023-07-22 09:21 6阅读 0赞

# 如何在document.ejs模板中引用.umi.js配置变量 #

document.ejs模板可以为umi.js项目配置最为基本的配置之一，可以理解为index.html的入口。  
我们知道原生的react组件，都是需要挂载到html中的指定dom元素中的。umi.js是基于react的，尽管基于umi.js来开发react项目，使代码的逻辑更清晰，模块化更透彻，可维护性更好，但是，本质还是react。

所以，我们还是能找到，且必须能找到一个react根模块显示的挂载到html的dom元素中。那么，我们可以在这个document.ejs只找到这个挂载点，如下：

上面的有唯一的一个`<div id="root">`，这就是整个react的项目的根组件挂载点

##### 进入正题 #####

react本质还是js，任何前端项目本质还是依赖html,js,css，这些几乎没变过，所以，有时我们需要想以往的项目一样，引入一些静态资源（js、css等），或者，设置一些`<head>`中的共用dom元素如`<meta>`，那么就可以在这个`doument.ejs`模板中设置。

然而，有时我们希望，从别的配置文件中，引入某些变量到`doument.ejs`，以便开发或部署，那么在umi.js项目中如何实现呢？

在这里，umi.js提供的解决方案是，看代码如下：

<script src="<%= context.config.publicPath %>/lib/my.js"></script>

那么`context.config`又是从哪里来的呢，噹噹噹…，当然就是从 `.umi.js`来的，我们看一下：

// .umi.js
    export default { 
      publicPath: '/myPublic',
      base: basePath,
      hash: true,
      ignoreMomentLocale: true,
      targets: {  ie: 9 },
      treeShaking: true,
      ...
    }

看到了吧，在这个.umi.js的配置文件的所有变量，在document.ejs中都可以通过`context.config`来提取  
提取的格式，只需要加上`<%=context.config %>` 就可以了