导出/导入语句中有和没有花括号表示法有什么区别？

Question

我是ES6的新手，对导出和导入类的方式有点困惑。 似乎许多不同的符号是有效的，但工作方式不同。

我在src/web-api.js写了这样一个类：

class WebApi {
    // ...
}

export { WebApi };

我导入的是：

import { WebApi } from './src/web-api.js'

这工作正常，但在我尝试相同的事情之前没有花括号，它没有工作：

export WebApi; // Tells me '{' expected

import WebApi from './src/web-api.js'; // No syntax error but WebApi is undefined

即使在用于导出的MDN文档中 ，也可以使用符号export expression; 似乎是有效的。

同样，这就是我的应用程序文件中导入React的方式：

import React, { Component } from 'react';

为什么一个类和另一个没有大括号？ 一般来说，我怎么知道何时使用而不是使用花括号？

Answer 1

ES6提供了许多通过导入/导出来管理模块的方法。 但基本上有两个主要策略：

1. 默认导出/导入带有export default和import module from './module'
2. 多个导出/导入， export和import {member} from './module'或import * as module from './module'

（两者都可以混合但不推荐。）

---

模块导出/导入

function foo() {
  console.log('Foo');
}

function bar() {
  console.log('Bar');
}

策略＃1：默认导出/导入

导出（module.js）

function foo() {
  console.log('Foo');
}

function bar() {
  console.log('Bar');
}

export default {foo, bar};

/*
  {foo, bar} is just an ES6 object literal that could be written like so:

  export default {
    foo: foo,
    bar: bar
  };

  It is the legacy of the "Revealing Module pattern"...
*/

导入（main.js）

import module from './module';

module.foo(); // Foo
module.bar(); // Bar

策略＃2：多次出口/进口

导出（module.js）

export function foo() {
  console.log('Foo');
}

export function bar() {
  console.log('Bar');
}

导入（main.js）

import {foo, bar} from './module';

foo(); // Foo
bar(); // Bar

/*
  This is valid too:

  import * as module from './module';

  module.foo(); // Foo
  module.bar(); // Bar
*/

---

正如我之前所说，ES6模块比这复杂得多。 有关详细信息，我建议您阅读Axel Rauschmayer博士的 探索ES6 ，特别是本章： http ： //exploringjs.com/es6/ch_modules.html 。

Answer 2

大括号只是语法糖。 它将使用变量名作为对象键，例如：

const a = 1;
const test = {a}; // same as {a: 1};

它还可以用于通过变量名对对象进行解构。 它将检查对象是否具有与变量名具有相同值的任何属性，然后输出一个值（如果找到一个）：

const test = {a: 1};
const {a} = test; // a = 1

在模块中，一般用例是当你导入时通常有大括号，因为模块被导入为MODULE.function或MODULE.class 。 首先看出口是更直观的：

对于导出，它使用我之前提到的语法糖 - 您将它作为对象导出。 当你export { WebApi }; 你真正在做的是export {WebApi: WebApi} 。 这样可以更容易地访问内容，因为您现在只需要“MODULE.WebApi”来访问该类，而不必让它不必要地污染名称空间。 所有出口都需要这个！

继续进口，你在import语句中所做的就是解构模块对象并选择一个属性来保存到同名变量中。 在您的情况下，当您import {WebApi} from './src/web-api.js'时，您import {WebApi} from './src/web-api.js'执行类似import WebApi = web-api.js['WebApi'] from './src/web-api.js' （这不是有效的语法，只是为了向您展示它在后台正在做什么）。 这也是正确导入模块函数/类所必需的。 还有导入整个模块的选项，就像import * as ModuleName from './src/module.js'一样： import * as ModuleName from './src/module.js' 。 这会将所有导出的函数/类放入ModuleName对象中，以便将其视为普通模块。

但是，如果模块具有default导出，则导入和导出不需要大括号。 例如，react可能在其文件中有export default React - 这就是为什么当你import React from 'react'时不需要围绕它的大括号

希望我不是太混乱，如果我能澄清任何事情，请告诉我！

Answer 3

在你的情况下，如果从没有大括号的src/web-api.js文件导入，你应该在src/webfile-api.js有一个export default something

没有花括号

class WebApi {...};
export default WebApi;

在你的文件中

import WebApi from './src/web-api.js'

//这里， src/web-api.js文件中export default的元素应该在没有任何花括号的情况下导入。 PS：每个文件必须只有一个export default 。

用花括号

export { WebApi }

在您的文件中import {WebApi} from './src/web-api.js'

Dan Abramov在这个答案中清楚地解释了ES6中的export/import方法。 我什么时候应该使用花括号进行ES6导入？