如何使用 ES2015 语法导入从文件导出的所有内容？有通配符吗？

Question

使用 ES2015 语法，我们有了新的导入语法，我一直在尝试弄清楚如何将从一个文件导出的所有内容导入到另一个文件中，而不用将其包装在对象中，即。就像它们在同一个文件中定义一样可用。

所以，本质上，这个：

// constants.js

const MYAPP_BAR = 'bar'
const MYAPP_FOO = 'foo'

// reducers.js

import * from './constants'

console.log(MYAPP_FOO)

这不起作用，至少根据我的 Babel/Webpack 设置，此语法无效。

备选方案

这行得通（但是如果您需要导入的东西不止一些，那么它又长又烦人）：

// reducers.js

import { MYAPP_BAR, MYAPP_FOO } from './constants'

console.log(MYAPP_FOO)

这样做（但它将常量包装在一个对象中）：

// reducers.js

import * as consts from './constants'

console.log(consts.MYAPP_FOO)

是否有第一个变体的语法，或者您是否必须按名称导入每个东西，或者使用包装器对象？

Answer 1

Is there a syntax for the first variant,

没有

or do you have to either import each thing by name, or use the wrapper object?

是的。

Answer 2

您不能为第一个变体通过通配符导入所有变量，因为如果您在不同文件中使用相同的名称，它会导致变量冲突。

//a.js
export const MY_VAR = 1;

//b.js
export const MY_VAR = 2;


//index.js
import * from './a.js';
import * from './b.js';

console.log(MY_VAR); // which value should be there?

因为这里我们无法解析MY_VAR的实际值，所以这种导入是不可能的。

对于你的情况，如果你有很多值要导入，最好将它们全部导出为对象：

// reducers.js

import * as constants from './constants'

console.log(constants.MYAPP_FOO)

Answer 3

当然有。

只需使用codegen.macro

codegen
      'const { ' + Object.keys(require('./path/to/file')).join(',') + '} = require("./path/to/file");

但是好像不能导入codegen生成的变量。 https://github.com/kentcdodds/babel-plugin-codegen/issues/10

Answer 4

你可以导入对象，迭代它的属性，然后像这样用 eval 手动生成常量

import constants from './constants.js'

for (const c in constants) {
  eval(`const ${c} = ${constants[c]}`)
}

不幸的是，此解决方案不适用于我的 IDE 中的智能感知，因为常量是在执行期间动态生成的。但一般来说应该可以。

Answer 5

在 ES6 中，使用下面的代码，导入的内容可以在没有 wrap 对象的情况下使用。

就把它放在这里，以供像我这样结束搜索的人使用。

constants.js:

export const A = 2;
export const B = 0.01; 
export const C = 0.04;

main.js:

import * as constants from './constants'
const {
    A,
    B,
    C,
} = constants;

如何使用 ES2015 语法导入从文件导出的所有内容？有通配符吗？

How to import everything exported from a file with ES2015 syntax? Is there a wildcard?

javascript

ecmascript-6

es6-module-loader

备选方案