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

Question

好吧，我不太能找到这个问题的答案。我正在使用 webpack 和 babel es2015 preset 来处理 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);   

示例:

const CONSTANTS = { FOO: 'foo', BAR: 'bar' };

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

console.log(FOO, BAR);

通过将它们放在根级元素中，您无需直接实现它们就可以摆脱困境。

但是，请不要使用这种方法。