未能導入模塊

Question

我有一個模塊A就是喜歡

const defaults = { 
    something: {...}, 
    somethingElse : {...} 
} 

export { defaults as default }; 

然後我進口喜歡

import * as mod, { something } from 'moduleA'; 

mod是正確的有兩個聲明的屬性對象的屬性，但是{ something }未定義。

任何想法可能是什麼原因？

Answer 1

[與問題中的模塊]我導入像

import * as mod, { something } from 'moduleA'; 

但something未定義

但是你沒有你的模塊中的名稱something出口。只有一個包含對象的默認導出。你需要做的

import mod from 'moduleA'; 
const { something } = mod; 

我有一個模塊A就是喜歡

const defaults = { 
    something: {...}, 
    somethingElse : {...} 
} 

export { defaults as default }; 

但你真的不應該這樣做呢。導出類似命名空間的「單例」對象是ES6模塊中的反模式。你應該使用命名的出口，而不是：

export const something = {...}; 
export const somethingElse = {...}; 

有了這個，你原來的嘗試導入模塊將工作。

Answer 2

something不會從您的模塊A導出，只有對象defaults是。

因此，要獲得something，您需要從您導入的內容中獲取它。

import * as mod from 'moduleA'; 

const something = mod.something; 

如果你希望能夠導入something這樣的：import {something} from 'moduleA'，你將需要顯式地導出。例如：

export const something = {}; 
const somethingElse = {}; 

export default const defaults = { 
    something, 
    somethingElse 
}; 

Answer 3

import * as mod, { something } from 'moduleA'; 

原因的東西是不確定的，因爲當你：export { defaults as default };要導出一個名爲默認成員。當您export {apple, banana}時，您導出會員apple和會員banana。

當您導入某些內容而未指定要導入的成員時，將導入名爲default的成員。當你確定要導入的成員時，當然要導入這些成員。

這就是爲什麼雖然你的代碼沒有你打算什麼，下面將：

const mod = { something: 'test'}; 
export { mod as default }; // same as export default mod; 

和

import mod, {default as test} from './index'; // test and mod both have the same values 

console.log(mod); // { something: 'test' } 
console.log(test.something); // test 

Answer 4

如果您希望能夠訪問你的進口出口得名，你必須直接輸出它們：

const defaults = { 
    something: {...}, 
    somethingElse : {...} 
} 

export { 
    defaults as default, 
    defaults.something as something, 
    defaults.somethingElse as somethingElse 
}; 

另外，你可以使用destructuring的something和somethingElse出口：

export const { something, somethingElse} = defaults; 

然後再導入像你這樣：

import * as mod, { something } from 'moduleA'; 

但是：國防部將現在包含了道具：defaults, something, somethingElse。

如果你只慣於在default（等於你defaults）：

import mod, { something } from 'moduleA'; 

您可以瞭解更多關於在阿克塞爾Rauschmayr的精彩的博客貼子的ES6進出口語法：

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