Create React App的env.js配置中使用require.cache的作用是什么
该代码的作用是保证所有在env.js加载完成后引入的paths.js,都能读取到.env文件里的环境变量生成最新配置。
具体逻辑:
env.js的完整执行流程分为三步:- 先引入
paths.js获取基础路径,用来定位项目下的.env系列文件位置 - 删除
paths.js的模块缓存 - 读取所有
.env文件的变量,注入到process.env全局对象中
- 先引入
paths.js内部的路径生成逻辑依赖process.env中的变量(比如PUBLIC_URL这类用户自定义配置),如果不删除缓存,后续其他文件引入paths.js时,拿到的是环境变量注入前就初始化完成的旧版paths对象,里面的路径不会用到.env里的配置,不符合预期。
为什么你的测试没有看出差异:
你测试时用的env.js是删减版,缺少了「注入.env变量到process.env」的核心逻辑,两次引入paths.js时全局环境变量没有发生变化,自然输出完全一致。
你可以用下面的简化示例复现差异:
// paths.js 内容 module.exports = { publicPath: process.env.PUBLIC_URL || '/' } // env.js 简化版 const paths = require('./paths') // 清除paths缓存 delete require.cache[require.resolve("./paths")]; // 模拟加载.env后注入环境变量的逻辑 process.env.PUBLIC_URL = '/my-app' module.exports = { /* env相关导出 */ }
执行测试代码:
const pathsBeforeEnv = require('./paths') console.log(pathsBeforeEnv.publicPath) // 输出:/ require('./env') const pathsAfterEnv = require('./paths') console.log(pathsAfterEnv.publicPath) // 输出:/my-app
内容的提问来源于stack exchange,提问作者jwkoo
相关产品推荐
相关产品推荐

