Webpack中CommonJS模块作用域机制及跨模块调用函数问题咨询

首先直接给你肯定的答复：你的判断完全正确，CommonJS的模块作用域确实是完全隔离的。每个模块都拥有自己独立的执行上下文，模块内部的代码无法直接访问外部（比如导入它的主文件）的变量或函数，反过来主文件也不能直接访问模块内部未导出的内容——这是CommonJS模块系统的核心特性之一，就是为了避免全局变量污染，让每个模块都能独立封装、复用。

为什么会抛出ReferenceError？ #

咱们拆解下你的代码逻辑：
在foo.js里，bar方法尝试调用baz()，但这个baz在foo.js的模块作用域里根本不存在。主文件里定义的baz是属于主文件自身的作用域的，foo.js作为独立模块，完全感知不到外部作用域的变量，所以运行时自然会抛出引用错误。

可行的解决方法与最佳实践 #

根据你的需求，这里有几种常见的方案，你可以结合场景选择：

1. 将baz作为参数传入bar方法（灵活解耦）

修改代码让调用bar时把baz作为回调传进去，这是最灵活的方式，适合需要动态切换不同函数的场景：
foo.js

var foo = { bar(callback) { callback(); } }
module.exports = foo;

主JS文件

const foo = require('./foo.js');
function baz() { console.log('this is baz'); }
foo.bar(baz); // 输出: this is baz

2. 把baz抽成独立模块，在foo.js中显式导入（推荐）

如果baz是一个通用工具函数，最符合CommonJS设计理念的做法是把它单独封装成模块，然后在foo.js里显式依赖导入：
baz.js

function baz() { console.log('this is baz'); }
module.exports = baz;

foo.js

const baz = require('./baz.js');
var foo = { bar() { baz(); } }
module.exports = foo;

主JS文件

const foo = require('./foo.js');
foo.bar(); // 输出: this is baz

这种方式遵循了单一职责和显式依赖原则，模块间的依赖关系清晰，也更利于维护和复用。

3. 上下文绑定（不推荐，耦合性高）

你也可以把baz挂载到foo对象上，或者修改bar的执行上下文，但这种方式会让模块间的耦合度变高，破坏模块的封装性，尽量少用：
主JS文件

const foo = require('./foo.js');
function baz() { console.log('this is baz'); }
foo.baz = baz; // 将baz挂载到foo对象上
foo.bar();

foo.js

var foo = { bar() { this.baz(); } }
module.exports = foo;

总结 #

CommonJS的模块隔离是为了让模块更独立、更安全，避免全局污染。最佳实践优先选择显式导入依赖或参数传递的方式实现模块间交互，尽量避免耦合性高的写法。

内容的提问来源于stack exchange，提问作者Dan