如何使用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);

例：

 const CONSTANTS = { FOO: 'foo', BAR: 'bar' }; Object.keys(CONSTANTS).forEach(key => window[key] = CONSTANTS[key]); console.log(FOO, BAR);

通過將它們放在根級別元素中，您可以不必直接實現它們就可以逃脫。

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

Answer 2

ES2015無法將通配符導入變量到模塊的根名稱空間中。

您的兩個選擇是

import * as CONSTANTS from 'foobar'

要么

import {FOO, BAR} from 'foobar'

資料來源：