導出/導入語句中有和沒有花括號表示法有什么區別？

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導入？