Question

我正在学习Webpack，因此测试了我观察到的一些不同的方法。

我已经创建了以下JS文件，这是一种导出我在NPM包中观察到的方法。

// test.js
const Foo = { myVar: "Foo" }
const Bar = { myVar: "Bar"}

export default {
    Foo,
    Bar
}

在app.js内，我写了以下内容：

// app.js
import { Foo } from './test'

console.log(Foo);

我原以为我会从Foo中的导出对象中获取test.js对象，但我只是在控制台中获得undefined。另外，Webpack说：

"export 'Foo' was not found in './test'

因此，从导入中删除大括号：

// app.js
import Temp from './test'

console.log(Temp);

这会生成一个对象，其中包含Foo和Bar个对象。

有什么问题，就在这里？

Answer 1

您实际上是使用两个参数导出对象：

module.exports = {Foo, Bar}

如果您想使用import {Foo} from './file'语法，则应单独导出常量

export const Foo = { myVar: "Foo" }
export const Bar = { myVar: "Bar"}

Answer 2

删除默认关键字，用于指定默认导出的内容，而不是所有导出。您目前正在说您的整个导出对象都是默认值。

export {
    Foo,
    Bar
}

默认是说明如果没有指定某些内容，这应该是默认值，例如：

export {
    Foo as default, // import WhateverIWantToCallIt from './test'
    Foo, // import { Foo } from './test'
    Bar // import { Bar } from './test'
}

// Or you can export things separately:

export function Bar() {...}
export function Foo() {...}
export default Foo; // Declare what the default is

Answer 3

我认为你将破坏与命名导入相混淆

//this is not destructing but named imports
import { Foo } from './test'


// this is default export. 
export default { Foo, Bar }

要使用命名导入，您必须使用命名导出。

正如其他评论已经解释过你必须使用

export没有default

// test.js
const Foo = { myVar: "Foo" }
const Bar = { myVar: "Bar"}

export default {
    Foo,
    Bar
}


// app.js
import { Foo } from './test'

console.log(Foo); // works as expected

从＆＃34;导出默认值＆＃34;导入特定对象结果＆＃34; undefined＆＃34;

3 个答案: