在 ES6 中导出多个变量？答案

【问题标题】：Export more than one variable in ES6?在 ES6 中导出多个变量？
【发布时间】：2016-04-11 06:53:56
【问题描述】：

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

exports.js

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

export default TestObject
export Post

main.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

也许我做错了？

【问题讨论】：

只是一个疯狂的猜测，但您是否尝试过在第一行 export 的末尾添加分号？
@Pointy 我试过了。同样的错误。

标签： javascript ecmascript-6 vue.js

【解决方案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'

【讨论】：

我很好奇，export default 和 export var 有什么区别？
默认导出是你import foo from './module'时得到的，如果你使用export var SomeThing你需要按名称导入，例如import {SomeThing} from './module';
默认变成你导入的项目，不解构导入的对象。
所以唯一的区别是使用export default的对象没有大括号，而使用'export var`的对象需要大括号？两者在导入时都被命名为：foo、SomeThing。
@alexchenco 是的，主要区别在于foo 可以命名为任何名称，并且始终获得默认值，但TestObject 需要匹配导出的名称。如果你想在你导入它的模块中给它一个不同的名字，你必须做import {TestObject as SomeOtherName} from。 import foo from 是 import {default as foo} from 的缩写

【解决方案2】：

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

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

对于默认导出，我们可以单独写这个-

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

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

exports.js

export { Post };

main.js

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

example

【讨论】：

【解决方案3】：

导出默认值导出 {}

您导出时使用的名称必须与导入时相同。

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

【讨论】：

【解决方案4】：

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

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

export {
    TestObject,
    Post
}

然后，在导入时您可以这样做：

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

您可以在此处阅读有关 import 和 export 的所有信息。

【讨论】：

刚刚进行的编辑使我的答案无效。在 ES6 中不给键名就可以导出。
哦，我明白了。那么default 关键字不再需要了？
@MarioTacke 是的，我什么也没得到，不知道为什么那个编辑被接受了。
正确的@alexchenco，你解构了导入的文件。

【解决方案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});

【讨论】：