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

【问题标题】：How do I use Javascript ES6 ES2015 modules to export / import constants directly to the import module namespace?如何使用 Javascript ES6 ES2015 模块将常量直接导出/导入到导入模块命名空间？
【发布时间】：2017-11-03 00:38:56
【问题描述】：

好的，我找不到这个问题的答案。我正在使用 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'

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

【问题讨论】：

您几乎涵盖了所有可能性。 JavaScript 不会让您凭空提取变量，因此必须以某种方式、形状或形式定义它们。

标签： javascript ecmascript-6 es6-modules

【解决方案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);

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

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

【讨论】：

这就是我的想法，因为在野外缺乏一个例子。我想我正在寻找标准服务器端语言中的“包含”之类的东西，但要以 ES2015 模块方式进行。复制密钥是一个有趣的想法，但是我必须在我导入常量的任何地方都运行它。我可以理解为什么不支持此用例，因为例如，如果您尝试使用常量以外的其他东西来执行此操作，然后错误地覆盖了另一个模块中的成员，那么它真的很容易搞砸。不过，就我的常数而言，拥有它会很好。

【解决方案2】：

ES2015 无法将通配符导入变量到模块的根命名空间中。

你的两个选择是

import * as CONSTANTS from 'foobar'

或

import {FOO, BAR} from 'foobar'

来源：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

http://2ality.com/2014/09/es6-modules-final.html

【讨论】：