Javascript 在export/import语句中使用和不使用花括号表示法有什么区别？

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

我在

src/webapi.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

即使在上，符号

导出表达式似乎有效

同样，以下是在我的应用程序文件中导入React的方式：

import React, { Component } from 'react';

为什么一个类有花括号，另一个没有花括号？总的来说，我如何判断何时使用和不使用花括号？
大括号只是语法上的糖分。它将使用变量名作为对象键，例如：

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

它还可以用于按对象的变量名来分解对象的结构。它将检查对象是否具有与变量名相同值的任何属性，如果找到，则输出一个值：

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

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

对于导出，它使用了我前面提到的语法糖——您将它作为对象导出。当您执行
导出{WebApi}时
您真正做的是
导出{WebApi:WebApi}
。这使得访问更容易，因为您现在只需执行“MODULE.WebApi”即可访问该类，而不必让它不必要地污染名称空间。这也是所有导出所必需的

转到导入，您在import语句中所做的工作实质上是分解模块对象的结构，并选择一个属性保存到同名变量中。在您的例子中，当您从“/src/web api.js”导入{WebApi}

时，您将执行类似于从“/src/web api.js”导入WebApi=web api.js['WebApi']。这也是正确导入模块函数/类所必需的。还有导入整个模块的选项，就像NodeJS所做的那样：

import*as ModuleName from./src/module.js'

。这将把所有导出的函数/类放入ModuleName对象中，以便将其视为普通模块

但是，如果模块具有默认导出，则导入和导出不需要大括号。例如，react的文件中可能有

export default react

——这就是为什么当您从“react”导入react时，它周围不需要大括号的原因

---

希望我没有太困惑，如果我能澄清任何事情，请告诉我

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

默认值导出/导入时使用

导出默认值

和

从“./module”导入模块

多个从./module'导出和

从./module'

导入{member}或从./module'导入.

作为模块导出

（两者均可混合，但不建议混合。）

---

要导出/导入的模块 策略#1：默认导出/导入 导出（module.js）

导入（main.js）

战略2：多重出口/进口 导出（module.js）

导入（main.js）

---

---

正如我前面所说，ES6模块比这复杂得多。要了解更多信息，我建议您阅读Axel Rauschmayer博士的《探索ES6》，尤其是本章：。

在您的案例中，如果您从

src/web api.js

文件导入而不使用花括号，您应该在

src/webfile api.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"...
*/

import module from './module';

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

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

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

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

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

/*
  This is valid too:

  import * as module from './module';

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

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

export { WebApi }

在你的档案里

从“./src/web api.js”导入WebApi

//在这里，导入
src/webapi.js
文件中带有
export default
的元素时，应该不使用大括号。
PS：每个文件必须只有一个导出默认值

带花括号

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"...
*/

import module from './module';

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

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

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

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

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

/*
  This is valid too:

  import * as module from './module';

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

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

export { WebApi }

在你的档案里
import{WebApi}from./src/WebApi.js'

Dan Abramov在此回答中清楚地解释了ES6中的导出/导入方法。
对象分解引用的可能重复是不合适的<代码>导入

语法是自包含的，并尝试模仿解构语法（到适用的程度）。这不是解构，这是免费的语法糖。非常感谢你的详细回答。JS社区是否就首选的出口策略达成了共识？我不这么认为。我想说，多个命名的导出提供了灵活性，而单个默认导出提供了稳定性。在Node.js应用程序（使用CommonJS）中，单个导出的对象文字非常流行（由于显示模块模式…）。但老实说，这主要是偏好的问题。使用一个或另一个。只是避免在同一模块中同时使用这两种情况，因为同样的原因，您应该避免将蛇壳和骆驼壳混合使用。这是可能的，但前后不一致。