Javascript 導出默認和導入

Question

我有以下代碼：

const API1 = new API({
   ...
})

const API2 = new API({
   ...
})

export default { API1, API2 }

我需要像這樣導入：

import API1 from '/lib/api'

API1.get()...

但它不起作用。 我不想這樣做：

import blah from '/lib/api'
blah.API1.get()...

我該如何解決這個問題？ 謝謝。

Answer 1

如果您需要導出多個項目，並且不想在消費模塊中創建兩個變量（一個用於默認導入 - object，另一個用於API1屬性），您唯一的其他選擇是更改默認值導出到命名導出，允許您只導入一個特定的命名屬性：

const API1 = new API({
   ...
})

const API2 = new API({
   ...
})

export { API1, API2 }

和

import { API1 } from '/lib/api'

API1.get()...

export {語法表示導出是命名的，而不是默認的， import {語法表示您正在導入命名的導入，而不是默認的導入。

（看起來很像解構，也有點像，但又不一樣）

Answer 2

由於您默認導出 object 您需要訪問單個屬性才能訪問那里的方法，而是可以使用命名導出

// exporting values

export const API1 = new API({
   ...
})

export const API2 = new API({
   ...
})

---

// Importing values

import { API1 } from '/lib/api'

API1.get()...