webpack 里面 definePlugin 里面定义了一些 process.env 的变量，这个是如何应用到 runtime 环境的？
yazoox · 2022-01-25 10:35:35 +08:00 · 1286 次点击这是一个创建于 1018 天前的主题，其中的信息可能已经有所发展或是发生改变。
我的理解，webpack 是个打包工具，是在 compile 阶段。 打包好以后，把 bundle 部署到服务器上，比如 aws 上面，运行后，是怎么应用这些 process.env 的？
是 webpack 打包时，把 process.env 生成了一个文件，然后在 runtime 再把这些 variables 从文件里面读取出来了么？
我 google 了一下，找相关文档，没有找到。
 |
1
Mutoo 2022-01-25 10:39:34 +08:00
直接把整个 process.env.var 替换（硬编码）成你指定的字面量，正如它的名字 #define 一样。
|
|
2
Mutoo 2022-01-25 10:40:08 +08:00
|
 |
3
murmur 2022-01-25 10:40:25 +08:00
不同的框架不一样，vue 只替换 process.env.vue_app_xxxx 的变量
|
 |
4
yazoox OP @Mutoo 但我们的代码是 runtime 运行的
比如 export function getVersion() { return process.env.VERSION as string; } 你的意思是，webpack 在 compile 的时候，会直接把这里的 process.env.VERSION 替换掉么？ 谢谢 |
 |
5
otakustay 2022-01-25 11:34:09 +08:00
你自己用了 DefinePlugin 的话，就是你定义的 key 字面量替换的，你上面的代码，在 VERSION=1.2.3 ，且用了 new DefinePlugin({'process.env.VERSION': JSON.stringify(process.env.VERSION)})的情况下，就会被编译成 return '1.2.3'
所以你必须原样写 process.env.VERSION ，不能 process.env[CONST_VERSION]之类的动态写法 |
 |
6
zqx 2022-01-25 13:14:30 +08:00 via Android
打包的时候，替换了你的代码
浏览器执行的时候已经不是 process.env 了 |
 |
7
SoloCompany 2022-01-25 13:20:49 +08:00 via iPhone
你应该配合 treeshaking 一起理解
|
 |
9
wyhooo 2022-01-25 14:10:32 +08:00
硬核替换，没别的技巧。
|
 |
10
mxT52CRuqR6o5 2022-01-25 14:12:52 +08:00
你写个简单点的 case 自己看一下编译结果就明白了
|
|
11
mxT52CRuqR6o5 2022-01-25 14:13:44 +08:00
https://webpack.js.org/plugins/define-plugin/#root
The DefinePlugin replaces variables in your code with other values or expressions at compile time. 看到 replace 了吗 |
|
12
mxT52CRuqR6o5 2022-01-25 14:15:29 +08:00
必须是 compile time 的硬核替换，不然没法把条件为 false 的分支代码 drop 掉
|
|
13
mxT52CRuqR6o5 2022-01-25 14:16:47 +08:00
当然也许 development 环境可以做一些动态注入之类的方案（在全局声明个 process 变量），可以更快的编译
|
Select Language