Javascript 中Import, Export和Require

Posted on by

您可能在 Javascript 中看到过以下行：

const fs = require('fs');

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

import fs from 'fs'

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

import { promises as fs } from 'fs'

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

在 Javascript 中导入、导出和Require#

开箱即用，当您在 Node.JS 中使用 Javascript 编写时，require()就像一个魅力。那是因为require它是专门为 Node.JS 构建的。如果文件导出某些内容，则 require 将导入该导出内容。假设我们有一个名为“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 和 require 之间的区别是 require 是针对 Node.JS 的，而 import 是 Javascript/ECMAScript 标准。Import 使用略有不同的表示法，但允许我们做与 require 大致相同的事情。

导入标准给了我们更多的灵活性，并以我们可以导入特定功能片段的方式工作。当与像 Webpack 这样的捆绑器结合使用时，这被称为tree shaking ，允许我们只加载我们想要的 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 中导入默认值#

如果在我们的导出文件中，我们命名了一个默认导出，那么该导出将包含在我们想要的任何内容中。因此，例如，假设我们执行以下操作：

let functionList = {}

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

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

import myStuff from './general.js';
myStuff.consoller() // Our consoller function

像在 Javascript 中一样导入 *#

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

import * as functionSet from './general.js';
functionSet.consoller(); // Runs our consoller function

为什么导入对我来说在 Node.JS 中不起作用？

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

将您的 package.json 更改为包含该行"module":"true"，如下所示：

// .....
"name": "Fjolt",
"type": "module", /* This is the line you need to add */
"repository": {
    "type": "git",
    "url": "..."
},
"author": "",
"license": "ISC",
// .....

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

结论#

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

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

推荐阅读：