导入语句和Babel

Question

我使用Facebook keyMirror中的fbjs来定义两个常量。

// file1.js
import keyMirror from 'fbjs/lib/keyMirror'
export default keyMirror({
    CONST1: null,
    CONST2: null,
})

然后在file2.js中导入它们：

// file2.js
import { CONST1, CONST2 } from './file1'
console.log(CONST1) // undefined

他们的价值无法解决。如果我像这样更改file2.js：

// file2.js
import constants from './file1'
console.log(constants.CONST1) // CONST1

它工作正常。它出什么问题了？我正在使用带有babel-preset-es2015的Babel 6来运行脚本。

Answer 1

您的导入不匹配，如果导出default导出，则必须导入default。如果要使用named导出导入，则需要使用named导出导出。

有关

import { CONST1, CONST2 } from './file1'

工作，你需要

export let {CONST1, CONST2} = keyMirror({
    CONST1: null,
    CONST2: null,
});

ES6模块语法中{ CONST1, CONST2 }之后的import与解构无关，因此您不应将其视为从默认导出中拉出属性。相反，将其视为要从模块导入的名称列表。

你的解决方案可能适用于Babel 5，但它仍然无效，即便如此。您可以查看this answer以获取更多解释。

每个ES6模块都会导出一组导出，为简单起见，default是特殊的。

import constants from './file1';

是

的缩写

import {default as constants} from './file1';

和

export default keyMirror({
    CONST1: null,
    CONST2: null,
})

基本上是

的缩写

var temp = keyMirror({
    CONST1: null,
    CONST2: null,
});
export {temp as default};