如何將對象數組及其屬性導出到另一個 JS 文件？

Question

我正在進行的學校項目需要我使用靜態模塊打包器 WebPack。 現在我要做的是導出

const data = [
  {
    description: "Go swimming",
    completed: true,
    index: 1,
  },
  {
    description: "Create an animated puppet",
    completed: false,
    index: 2,
  },
  {
    description: "Hack NASA",
    completed: false,
    index: 2,
  },
];

並使用導入函數將其導入到我的 functions.js 文件中。 但它不起作用。

Answer 1

Webpack 支持 JavaScript 本機模塊 (ESM)，我建議使用它。 （相對於 CommonJS [ require調用等]。）

您幾乎字面上有問題中的導出部分，只需將export移動到代碼塊中：

export const data = [
    // ...
];

那是一個命名的 export 。 你像這樣導入它（如果上面是在同一目錄中the-source-module.js ）：

import { data } from "./the-source-module.js";

...具有導入功能。

沒有import函數，但有一個非常類似於函數的import構造，稱為動態導入。 它看起來就像一個返回promise的函數。 如果這是您被告知要使用的內容（而不是上面的import聲明），它看起來像這樣：

在支持頂級await （Webpack 支持）的環境中：

const { data } = await import("./the-source-module.js");
// ...use `data` here...

在沒有以下情況的環境中：

import("./the-source-module.js")
.then(({data}) => {
    // ...use `data` here...
})
.catch(error => {
    // ...import failed...
});
// DON'T TRY TO USE `data` HERE, IT WON'T WORK

更多關於 MDN：

• 模塊概述
• export
• import （包括動態import() ）

我還在我最近的書JavaScript: The New Toys （以及第 8 章中的 promises 以及所有其他 ES2015-ES2020 內容）的第 13 章中介紹了模塊。

---

注意：在import { data } from ...使用{}可能看起來有點像解構，但它不是解構。 除了{} ，命名導入和解構的語義和語法完全不同。 例如，如果您想使用data以外的名稱，它將是import { data as yourName } from ... ，這不是重命名與解構的工作方式。

有點令人困惑的是，上面帶有動態import()的示例正在使用解構。 import()所“返回”的承諾由一個稱為“模塊命名空間對象”的對象實現，該對象具有每個命名導出的屬性。 動態import()和import聲明之間的根本區別在於它的動態特性。