如何在 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;