ES6中如何导出多个变量？

Question

我正在尝试在ES6中导出多个变量：

exports.js

var TestObject = Parse.Object.extend('TestObject')
var Post = Parse.Object.extend('Post')

export default TestObject
export Post

主文件.js：

import TestObject from '../store'
import Post from '../store'

var testObject = new TestObject() // use Post in the same way
testObject.save(json).then(object => {
  console.log('yay! it worked', object)
})

我知道只有一个默认值，所以我只在第一项中使用了default。但是，我收到了这个错误信息：

Module build failed: SyntaxError: /home/alex/node/my-project/src/store/index.js: Unexpected token (9:7)
   7 | 
   8 | export default TestObject
>  9 | export Post

也许我做错了？

- alexchenco

---

只是一个猜测，你尝试在第一行“export”的末尾添加一个分号了吗？ - Pointy

@Pointy 我尝试过了。同样的错误。 - alexchenco

Answer 1

那不是有效的语法。你可以这样做：

export { Post }

甚至只是

export var Post = Parse.Object.extend('Post')

或者将整个文件缩短至

export default Parse.Object.extend('TestObject')
export var Post = Parse.Object.extend('Post')

您的导入也不正确，您需要执行：

import TestObject, { Post } from '../store'

如果你真的想要一个单独的默认导出和一个单独的命名导出，可以这样做。如果你愿意的话，你也可以只创建两个命名导出而没有默认导出，例如：

export var TestObject = Parse.Object.extend('TestObject');
export var Post = Parse.Object.extend('Post');

或者

var TestObject = Parse.Object.extend('TestObject');
var Post = Parse.Object.extend('Post');
export { TestObject, Post };

并使用导入

import { TestObject, Post } from '../store'

- loganfsmyth

---

默认导出是使用 import foo from './module' 时得到的那个，如果你使用 export var SomeThing 的话，你需要通过名称导入它，例如 import {SomeThing} from './module';。 - loganfsmyth

@MarioTacke 这不是解构，称之为解构只会让事情更加混乱。它只是在 {} 内部的名称列表，而不是对象。 - loganfsmyth

那么唯一的区别就是使用 export default 的对象没有花括号，而使用 'export var 的对象需要花括号？在导入时两者都有名称：foo，SomeThing`。 - alexchenco

@loganfsmyth，你是对的，我搞混了。谢谢你的纠正。 - Mario Tacke

@alexchenco 是的，主要区别在于 foo 可以命名为任何名称并且始终会获取默认值，但是 TestObject 需要匹配导出的名称。如果您想在导入它的模块中为其命名不同的名称，则需要使用 import {TestObject as SomeOtherName} from。import foo from 等价于 import {default as foo} from。 - loganfsmyth

Answer 2

您可以这样在ES6中导出多个对象

var TestObject = Parse.Object.extend('TestObject')
var Post = Parse.Object.extend('Post')

export {
    TestObject,
    Post
}

然后，在导入时你要像这样做：

import { TestObject, Post } from './your-file';

您可以在这里阅读有关导入和导出的所有内容。

- Mario Tacke

---

刚刚所做的修改使我的回答失效了。在ES6中，不给导出命名变量赋予键名也是有效的。 - Mario Tacke

哦，我明白了。所以 default 关键字不再是必需的了？ - alexchenco

@MarioTacke 嗯，我一无所知，不知道为什么那个编辑被接受了。 - loganfsmyth

正确的做法是像 @alexchenco 说的那样，对导入的文件进行解构。 - Mario Tacke

Answer 3

为了导出多个变量，我们必须将想要导出的所有内容从文件中取出并放在{ }内，像这样 -

export { <var 1>, <var 2> , <var 3>, ... , <var n>};

对于默认导出，我们可以单独编写如下代码 -

export default <var name>;  // there can be only one default export; 

在您的代码中，您可以进行以下更改 -

exports.js

export { Post };

main.js

import { Post } from '<exports file>';

示例

- user260778

Answer 4

默认导出

你导出的名称必须与导入时相同。

你也可以在导入时使用 * 。

- Abhay

Answer 5

如果符合您的使用情况，您可以将非默认导出作为默认导出的属性。我发现这样可以使代码更清晰。

const TestObject = Parse.Object.extend('TestObject');
TestObject.Post = Parse.Object.extend('Post');

export default TestObject;

然后，在导入时，您只需要导入默认值：

import TestObject from './your-file.js';

然后，你可以这样使用它：

TestObject.Post({some, args});

- Pablo Rocha