深入了解Javascript 中的 Import, Export 和 Require

大家可能已经在 Javascript 中看到以下行：

const fs = require('fs');

然后你可能已经看到了这个…

import fs from 'fs'

更糟糕的是，你可能已经看到了：

import { promises as fs } from 'fs'

这一切意味着什么？！ 为什么有这么多看似在 Javascript 中导入包的方法？ 为什么我不能在我的 Node.JS 服务器上进行导入？ 让我们来探索这一切意味着什么。

Javascript 中的 Import, Export 和 Require

开箱即用，当我们在 Node.JS 中使用 Javascript 编写代码时，require() 就很有魅力。 那是因为 require 是专门为 Node.JS 构建的。 如果文件导出某些内容，则 require 将导入该 export 。 假设我们有一个名为“general”的包，其中包含一个 index.js 文件，如下所示：

export.consoller = function(msg) {
    console.log(msg);
}
export.adder = function(x, y) {
    return x + y;
}
export.name = 'Some Name';

这种使用 export.[function] 的格式是特定于 NPM 的。 它是为与 NPM 一起工作而构建的，因此是 Node.JS 的定制部分，不符合任何特定标准。 要导入这些函数，我们可以很容易地使用 require：

const general = require('./general.js');

现在可以访问我们拥有的任何导出。 在上面使用 export.name 的示例中，我们现在可以通过代码中的 general.name 访问它。 这是使用 Node.JS 添加包的最直接的方法之一。

要记住的重要一点是，require 和 import 是两个完全独立的功能。 不要对我们使用 require 导出代码的方式感到困惑！

Javascript 中的 import

import 和 require 的区别在于 require 是针对 Node.JS 的，而 import 是 Javascript/ECMAScript 标准。 import 使用稍微不同的符号，但允许我们做与 require 大致相同的事情。

import 标准为我们提供了更多的灵活性，并且以我们可以导入特定功能的方式工作。 当与 Webpack 之类的捆绑器结合使用时，这称为树抖动，允许我们仅加载所需的 Javascript，而不是整个文件。 首先，让我们看一个如何导出和导入函数的简单示例。

首先，假设我们有一个名为 general.js 的文件。 这是我们的导出文件。 让我们使用 export 关键字导出一些函数。

const consoller = function(msg) {
    console.log(msg);
}
const adder = function(x, y) {
    return x + y;
}
const name = 'Some Name';

export { consoller, adder, name }

现在当我们导入时，我们只能导入这个模块的一部分。 例如：

import { consoller } from './general.js'

现在我们只需要引用 consoller，并且可以将它引用为consoller()。 如果我们不想这样，我们可以将 consoller 作为其他东西导入，即：

import { consoller as myFunction } from './general.js'
myFunction() // Runs 'consoller'

在 Javascript 中导入 default 值

如果在我们的导出文件中，我们命名一个 default 导出，该导出将被包含为我们想要的任何内容。 例如，假设我们执行以下操作：

let functionList = {}

functionList.consoller = function(msg) {
    console.log(msg);
}
functionList.adder = function(x, y) {
    return x + y;
}
functionList.name = 'Some Name';
    
export default functionList;

现在，当我们导入时，我们可以导入 functionList 并将其命名为我们喜欢的任何名称，格式如下：

import myStuff from './general.js';
myStuff.consoller() //  consoller 方法

Javascript 中的 Import * as

我们可以做的另一件事是导入所有内容并将其命名为其他名称。 例如，我们可以这样做：

import * as functionSet from './general.js';
functionSet.consoller(); // 运行 consoller 方法

为什么 import 在 Node.JS 中对我不起作用？

默认情况下不启用 import ，因此我们必须让 Node.JS 知道我们正在使用它。 确保大家至少安装了 Node.JS 版本 12。 然后，我们需要更新我们的 package.json。 如果没有，请在自己正在工作的文件夹中的命令行上运行 npm init。

将自己的 package.json 更改为具有“module”：“true”行，如下所示：

// .....
"name": "Jiyik",
"type": "module", /* 这是我们需要加的行 */
"repository": {
    "type": "git",
    "url": "..."
},
"author": "",
"license": "ISC",
// .....

现在模块将默认在我们的 Node.JS 目录中工作。 但是有一个问题——那就是现在 require() 将不起作用——所以在进行此更改之前，请确保我们已完全转换为 import 。

总结

因此，require 是一个自定义构建的解决方案，而 import/export 是一个 Javascript 标准。 require 最初是因为 import 不存在而编写的，而 Node.JS 需要一种轻松插入包的方法。 后来，监督 Javascript 开发的小组提出了导入建议。 换句话说，Node.JS 想要快速做某事，所以发明了自己的方法。

现在我们有了 import （这比 require 更好，更充实），如果可以的话，我建议使用它。 由于它是一个标准，这意味着我们可以在前端和后端开发中使用它，并且它将为我们提供更多用于导入和导出包的选项。 如果你在前端做任何事情，它也会限制文件大小，只导入你需要的！