怎么设置全局变量文件并且打包后暴露出这个文件，这个文件不进行编译在TS中报错比如设置 window.ENV #6153

shxinlei · 2021-02-19T20:03:16Z

shxinlei
Feb 19, 2021

比如建立一个文件叫做ENV.js 在打包的时候移入到打包文件中

但是在TS中出现使用 ENV.xxx 的时候出现window 上找不到ENV 的错误请求结局方案

zhtangsh · 2021-02-25T06:18:49Z

不清楚umijs是怎么做的，我想说一下我的解决方法..

假设配置文件如下

// src/env.js
const ENV = {
  a: 1,
  b: 2
}

在模板document.js中引入外部脚本

...
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="<%= context.publicPath %>env.js"></script>
</head>
...

在typing.d.ts中定义

//typing.d.ts
declare const ENV: { a: number, b: number };

在.umirc.ts中定义

import { defineConfig } from 'umi';

export default defineConfig({
  copy: [{ from: 'src/env.js', to: 'env.js' }],
});

然后在代码的任何地方就可以直接使用ENV.a和ENV.b了

在打包文件的dist/下放入env.js文件，env.js的内容可以用envsubst在容器化部署时通过环境变量替换
在nginx.conf中加入对应配置

    location ~ env\.js {
      alias /var/static/dist/env.js;
      expires -1;
    }

我一般打包成docker镜像，这样将同一份代码部署到不同的地方去，相关配置使用系统的ENV来更改

这个做法有点不那么umi，但是可以解决问题，也希望知道umi自家是如何做的....搜了很久...

0 replies