[Question] 废弃 document.ejs 的出发点是什么？

[postbird]

线上的页面基本都会在document html 模板除了更改一些 HTML 属性外和 HTML 节点外，会进行一些基础库的初始化工作（如埋点、自动化监控）。

除此之外，还会由 BFF 统一注入一些全局变量（如 window.employeeInfo/window.authData）或者是 window.apiPath（尤其是有国际化业务的场景），移除后应当如何实现这部分能力呢？

umi@3 通过 document.ejs 可以轻松注入 nunjucks 的变量，然后由 BFF 渲染的时候注入这些变量值。

想了解下 umi@4 这种改变的目标和收益是什么？

目前看只能通过scripts 这种拼接逻辑 或者 addHTMLHeadScripts 这种插件 api 实现？

补充一个之前的应用示例：

window.publicPath = '{{ PUBLIC_PATH | default("xxx/xxx/xxx/xxxx/xxxxxxxx") }}';

const env = '<%= process.env.NODE_ENV %>';

if (env === 'production') {
  window.globalConfig = {
    SYSTEM_URL: '{{ SYSTEM_URL | default("/") }}',
  };
} else {
  window.globalConfig = {
    SYSTEM_URL: '/',
  };
}

[fz6m]

目前提供了大量的 html 快捷操作 api 来拼成最终 html 。

一个例子：https://github.com/umijs/umi-next/blob/master/examples/boilerplate/plugin.ts

其中：

// ${projectRoot}/plugin.ts

import { IApi } from https://github.com/umijs/umi;

export default (api: IApi) => {
  api.modifyHTML(($) => {
    $('head').append([
      `<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js'></script>`,
      `<script src='others...'></script>`
    ])
    return $;
  });
};

将提供 jquery like 的 api ，详见 cheerio

通过如上例子中的 api 可以将你的所有逻辑抽象到 项目级插件 ${projectRoot}/plugin.ts 中（该文件会被自动注册为插件）

如果需要更好的复用，可以自行编写 @scope/umi-plugin-some or preset 等将他抽象为 npm 包做复用。