43

使用 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)

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

4

5 回答 5

50

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

//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)
于 2016-02-23T11:36:58.703 回答
31

是否有第一个变体的语法，

不。

还是您必须按名称导入每个事物，还是使用包装器对象？

是的。

于 2016-02-22T14:28:06.187 回答
2

好吧，您可以导入对象，遍历其属性，然后像这样使用 eval 手动生成常量

import constants from './constants.js'

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

不幸的是，这个解决方案不适用于我的 IDE 中的智能感知，因为常量是在执行期间动态生成的。但它应该在一般情况下工作。

于 2019-06-30T17:51:37.370 回答
0

当然有。

只需使用 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

于 2018-04-25T02:58:17.720 回答
-2

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

把它放在这里给像我这样结束在这里搜索的人。

常量.js：

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

主.js：

import * as constants from './constants'
const {
    A,
    B,
    C,
} = constants;
于 2020-02-26T08:34:48.713 回答