如何在JavaScript中高效导入globals.js中的全部全局变量？

一、批量导入的可行方式 #

JavaScript ES模块规范里，没有语法能一次性将所有导出直接作为顶级变量导入（除非手动逐个写命名导入，显然数百个不现实）。最简洁的批量导入方式就是你提到的命名空间导入：

// main.js
import * as g from './global.js';

虽然需要通过g.myVar1访问，但这是规范内唯一的批量导入方案，而且它是实时绑定的——global.js里的变量值更新后，g.myVar1会同步反映最新值。

如果实在不想用命名空间对象，只能通过代码生成工具（比如写个脚本遍历global.js的导出，自动生成所有命名导入语句）来批量生成import { var1, var2, ... } from './global.js'，但本质还是逐个导入，维护成本较高。

二、解决"imports are immutable"报错 #

这个报错不是esbuild的限制，是ES模块的规范要求：导入的标识符是只读引用，不管原模块导出的是let、var还是const，你都不能在导入模块里直接给导入的变量赋值（比如myVar1 = 20这种操作是非法的）。

如果需要修改这些变量，有两种合理的解决方案：

1. 导出修改变量的方法
   在global.js里封装变量的读写逻辑，导出对应的方法：

   // global.js
   let myVar1 = 10;
   let myVar2 = 20;
   
   export const setMyVar1 = (val) => { myVar1 = val; };
   export const getMyVar1 = () => myVar1;
   // 批量生成类似的读写方法
   

   然后在main.js里通过方法操作变量：

   import { setMyVar1, getMyVar1 } from './global.js';
   setMyVar1(20);
   console.log(getMyVar1()); // 20
   

2. 导出带存取器的对象
   把变量封装到一个对象里，利用ES6的getter/setter实现可读写的批量访问：

   // global.js
   let myVar1 = 10;
   let myVar2 = 20;
   
   export const globalVars = {
     get myVar1() { return myVar1; },
     set myVar1(val) { myVar1 = val; },
     get myVar2() { return myVar2; },
     set myVar2(val) { myVar2 = val; },
     // 批量添加其他变量的存取器
   };
   

   在main.js里直接操作对象属性：

   import { globalVars } from './global.js';
   globalVars.myVar1 = 20;
   console.log(globalVars.myVar1); // 20
   

三、总结 #

• 批量导入只能用命名空间导入（import * as g），或通过工具生成逐个导入语句；
• 不能直接修改导入的变量，必须通过原模块提供的方法或存取器对象来操作；
• "imports are immutable"是ES模块规范的要求，和打包工具无关。

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