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

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模块比这复杂得多.如需进一步信息,我建议你阅读探索ES6由 阿克塞尔博士Rauschmayer先生,特别是这章:http://exploringjs.com/es6/ch_modules.html.