如何在 JS 文件中使用導入？

Question

我從另一個開發人員那里得到了一個 js 文件，其中開發人員使用導入而不是要求。 看起來像

import { Selector, Role, ClientFunction } from 'testcafe';
import inputStore from '../config/input-store';
import axios from "axios";
import fs from "fs";
import path from "path";

我現在想在這個 js 文件中添加另一個模塊，但我不知道如何使用 import 我想使用的模塊是https://github.com/Olegas/dom-compare

它的文檔說：

var compare = require('dom-compare').compare,

它的導入語法是什么？

Answer 1

require是CommonJS模塊語法的一部分。

import和export是標准 ES6 模塊格式的一部分，該格式在Node.js 的最新版本（但僅當明確啟用時）和從<script type="module">初始化時在模塊 Web 瀏覽器中受支持

請注意，您的示例還使用解構語法來讀取導入對象的屬性值，而無需將對象本身存儲在中間變量中。

相當於

var compare = require('dom-compare').compare,

...在帶有 ES6 模塊和解構的 ES6 中：

import { compare } from "dom-compare";

Answer 2

域名：

import {compare} from 'dom-compare';

解釋：

在這些 import 語句中，import 關鍵字右側的單詞是您可以用來訪問導入模塊的變量名稱。 因此，例如，在這種情況下，從var compare = require('dom-compare').compare到 import 語句的最直接轉換是：

import dom-compare from 'dom-compare';
var compare = dom-compare.compare;

然后，您可以在同名變量中訪問名為dom-compare的對象，並在同名變量中訪問dom-compare對象的屬性。 如果您願意，您可以將這些變量中的任何一個稱為其他名稱：

import myComparisonModule from 'dom-compare';
var theComparingProperty = myComparisonModule.compare;

但是為了從對象中獲取特定屬性，您也可以使用 es6 中的速記來做同樣的事情，但將變量名稱設置為屬性名稱：

import dom-compare from 'dom-compare';
var {compare} = dom-compare;

在這種語法中，您仍然可以訪問兩個變量（ dom-compare和compare ）。 唯一的區別是您仍然可以將dom-compare變量命名為您喜歡的任何名稱，但是您設置為從dom-compare對象中獲得的屬性的變量的名稱被設置為它最初的名稱當它是對象的屬性時（在本例中為compare ）。

但是，如果除了compare屬性之外不需要dom-compare模塊中的任何其他內容，您也可以僅在一行中執行此操作，這就是我們獲得的方式：

import {compare} from 'dom-compare';

在這種情況下，我們沒有訪問dom-compare模塊的變量，只有一個訪問來自dom-compare模塊的compare屬性的變量。 它以自己的名字命名。

您還可以在一行中從一個對象中獲取多個屬性。 例如，在語句import { Selector, Role, ClientFunction } from 'testcafe'; 您引用的另一個開發人員正在從testcafe對象中提取多個屬性以用作同名變量，這是以下內容的簡寫：

import testcafeModule from 'testcafe';
var Selector = testcafeModule.Selector;
var Role = testcafeModule.Role;
var ClientFunction = testcafeModule.ClientFunction;