如何在不同JS文件间导出/导入变量？代码报错求解决

问题场景 #

你在func.js中定义了函数，希望使用vars.js里的变量，现有代码运行后控制台报错：

SyntaxError: Export 'moduleNum' is not defined in module

现有代码 #

vars.js

let var1 = "test1";
let var2 = "test2";
export { var1, var2};

func.js

import { var1, var2 } from '../vars.js';

index.cshtml

<script type="module" src="~/vars.js" defer></script>
<script type="module" src="~/func.js" defer></script>

错误原因 #

报错中提到的moduleNum在你提供的vars.js里未定义，大概率是两种情况：

• func.js中误导入了不存在的moduleNum变量
• vars.js实际需要导出moduleNum但你没在代码中体现

正确实现步骤 #

1. 保证导出与导入的变量名完全匹配
   如果确实需要使用moduleNum，先在vars.js中定义并导出：

   let var1 = "test1";
   let var2 = "test2";
   let moduleNum = 100; // 新增需要的变量
   export { var1, var2, moduleNum };
   

   如果是拼写错误，直接修正func.js中的导入变量名，确保和vars.js导出的一致。

2. 校验模块文件路径
   func.js中的../vars.js路径要和实际文件结构对应：

   • 若func.js和vars.js在同一目录，改为./vars.js
   • 若vars.js在上级目录，当前路径正确

3. 在模块内正确使用变量
   模块内的变量属于模块作用域，需在func.js的函数或代码逻辑中使用：

   import { var1, var2 } from '../vars.js';
   
   // 示例函数使用变量
   function printVars() {
     console.log(var1, var2);
   }
   
   printVars(); // 调用函数输出变量
   

4. 浏览器模块注意事项

   • 必须通过本地服务器（如VS Code的Live Server）访问页面，直接打开本地HTML文件会触发跨域限制
   • 模块变量默认无法在控制台全局访问，若要测试可临时挂载到全局（不推荐生产环境使用）：

     import { var1, var2 } from '../vars.js';
     window.var1 = var1;
     window.var2 = var2;
     

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