如何使用Javascript ES6 ES2015模块将常量直接导出/导入到导入模块名称空间？

Question

好的，我找不到完全的答案。我正在使用webpack和babel es2015预设来处理ES2015模块。

导出的模块1，文件名“ foobar.js”

export const FOO = 'foo'
export const BAR = 'bar'

有没有办法将此常量导入到我的导入模块中的全局名称空间中？

我想在将使用常量的模块中执行此操作：

import 'foobar'

const doSomething = () => { console.log(FOO + BAR) }

我知道这会起作用：

import * as CONSTANTS from 'foobar'

const doSomething = () => { console.log(CONSTANTS.FOO + CONSTANTS.BAR) }

...还有其他方法可以将导入到特定名称空间中的结果相同。但是我想使用没有前缀的常量。

有没有一种方法可以将所有来自不同模块的导出直接导入到导入模块的根名称空间中？

*注意：我知道我可以这样做：

import {FOO, BAR} from 'foobar'

但是然后我必须在导入中显式引用每个常量，这导致更多的麻烦而不是更少的麻烦。

Answer 1

除了已经引用的两个选项之外：

import * as CONSTANTS from 'foobar';
import { FOO, BAR } from 'foobar';

您还可以执行默认导出以全部获取它们，但功能上与选项一相同：

// foobar.js
const FOO = 'foo';
const BAR = 'bar';

export default { FOO, BAR };

// myfile.js
import CONSTANTS from 'foobar';

另一种方法是为global或动态填充window（global对于Node.js，window对于浏览器代码）。

但是，我强烈建议您不要使用此方法，因为您将无法使用IDE的任何帮助，这会导致很多错误。现在编写额外的代码绝对不值得以后再发现难以发现的错误。

import CONSTANTS from 'foobar';

Object.keys(CONSTANTS).forEach(key => window[key] = CONSTANTS[key]);

console.log(FOO, BAR);   

例：

import * as CONSTANTS from 'foobar';
import { FOO, BAR } from 'foobar';

通过将它们放在根级别元素中，您可以不必直接实现它们就可以逃脱。

但是，请不要使用此方法。