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 更好,更充实),如果可以的话,我建议使用它。 由于它是一个标准,这意味着我们可以在前端和后端开发中使用它,并且它将为我们提供更多用于导入和导出包的选项。 如果你在前端做任何事情,它也会限制文件大小,只导入你需要的!

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » Javascript 中的 Import, Export 和 Require