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

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

import React,{ Component } from 'react';

ES6提供了许多通过导入/导出来管理模块的方法.但基本上有两个主要策略： @H_607_2@>默认导出/导入带有导出默认值和导入模块来自’./module’
>多个导出/导入,导出和导入{member}来自’./module’或导入*作为模块来自’./module’

@H_607_2@(两者都可以混合但不推荐.)

@H_607_2@模块导出/导入

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

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

@H_607_2@策略#1：默认导出/导入

@H_607_2@导出(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"...
*/

@H_607_2@导入(main.js)

import module from './module';

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

@H_607_2@策略#2：多次出口/进口

@H_607_2@导出(module.js)

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

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

@H_607_2@导入(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
*/

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