V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
webpack 里面 definePlugin 里面定义了一些 process.env 的变量，这个是如何应用到 runtime 环境的？
yazoox · Jan 25, 2022 · 2166 viewsThis topic created in 1561 days ago, the information mentioned may be changed or developed.
我的理解，webpack 是个打包工具，是在 compile 阶段。 打包好以后，把 bundle 部署到服务器上，比如 aws 上面，运行后，是怎么应用这些 process.env 的？
是 webpack 打包时，把 process.env 生成了一个文件，然后在 runtime 再把这些 variables 从文件里面读取出来了么？
我 google 了一下，找相关文档，没有找到。
 |
1
Mutoo Jan 25, 2022
直接把整个 process.env.var 替换（硬编码）成你指定的字面量，正如它的名字 #define 一样。
|
|
2
Mutoo Jan 25, 2022
|
 |
3
murmur Jan 25, 2022
不同的框架不一样，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 Jan 25, 2022
你自己用了 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 Jan 25, 2022 via Android
打包的时候，替换了你的代码
浏览器执行的时候已经不是 process.env 了 |
 |
7
SoloCompany Jan 25, 2022 via iPhone
你应该配合 treeshaking 一起理解
|
 |
9
wyhooo Jan 25, 2022
硬核替换，没别的技巧。
|
 |
10
mxT52CRuqR6o5 Jan 25, 2022
你写个简单点的 case 自己看一下编译结果就明白了
|
|
11
mxT52CRuqR6o5 Jan 25, 2022
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 Jan 25, 2022
必须是 compile time 的硬核替换，不然没法把条件为 false 的分支代码 drop 掉
|
|
13
mxT52CRuqR6o5 Jan 25, 2022
当然也许 development 环境可以做一些动态注入之类的方案（在全局声明个 process 变量），可以更快的编译
|
Select Language