Question

假设我们必须导出大量名称。

export const fn0 = fn.bind(null, '0');
export const fn1 = fn.bind(null, '1');
...
export const fn999 = fn.bind(null, '999');

是否可以导出如下的动态名称？

// array is [0 to 999]
array.forEach(i => export const [`fn${i}`] = fn.bind(null, i.toString());

Answer 1

坦率地说，不。这是设计使然。

模块语法设计为statically analysed。这意味着可以确定其他模块不需要执行任何代码所需的模块。这在所谓的"tree shaking"中具有巨大的优势，其中可以根据实际使用的内容选择性地导入代码（并且rollup和webpack之类的模块捆绑器使用此功能）。 / p>

这是ES6模块不同于commonjs的关键方式。如果您从库中require使用一种方法，则文件中的所有内容都会运行，而不仅仅是您使用的方法。如果您import从库中获取一个函数，则（应该）仅获取该函数。如果必须运行所有代码以找出要导出的内容，则无法执行此操作。

引用here

ECMAScript 6为您提供了两全其美的方法：同步语法 Node.js以及AMD的异步加载。为了使两者 ES6模块在语法上可能不如Node.js灵活模块：进出口必须在最高层进行。那意味着他们也不是有条件的此限制允许ES6 模块加载器以静态分析一个模块导入了哪些模块模块并在执行其主体之前加载它们。

Answer 2

let fnCollection = {};
function fn(){
  return "welcome js"
}
[1,2,3,4].forEach(i =>fnCollection[`fn${i}`] = fn.bind(null, i.toString()));
export default fnCollection ;

用JavaScript导出动态名称

2 个答案: