使用Node.js需要与ES6导入/导出

Posted 2021-04-04

在我正在合作的项目中，我们有两个选择，我们可以使用哪个模块系统：

1. 使用require导入模块，并使用module.exports和exports.foo导出。
2. 使用ES6 import导入模块，并使用ES6 export导出

使用一个优于另一个是否有任何性能优势？如果我们使用ES6模块而不是Node模块，还有什么我们应该知道的吗？

答案

使用一个优于另一个是否有任何性能优势？

请记住，还没有本身支持ES6模块的javascript引擎。你说你自己在使用巴别塔。无论如何，Babel默认将import和export声明转换为CommonJS（require / module.exports）。因此，即使您使用ES6模块语法，如果您在Node中运行代码，也将使用CommonJS。

CommonJS和ES6模块之间存在技术差异，例如： CommonJS允许您动态加载模块。 ES6不允许这样，but there is an API in development for that。

由于ES6模块是标准的一部分，我会使用它们。

另一答案

您可能需要考虑以下几种用法/功能：

要求：

• 您可以在已加载的模块名称未预定义/静态的情况下进行动态加载，或者只有在“真正需要”时才有条件地加载模块（取决于某些代码流）。
• 加载是同步的。这意味着如果您有多个requires，它们将被逐个加载和处理。

ES6进口：

• 您可以使用命名导入来有选择地仅加载您需要的部分。这可以节省内存。
• 导入可以是异步的（在当前的ES6模块加载器中，它实际上是）并且可以执行得更好。

此外，Require模块系统不是基于标准的。现在ES6模块存在的可能性很小。将来，在各种实现中将对ES6模块提供原生支持，这在性能方面将是有利的。

另一答案

主要优点是句法：

• 更多声明/紧凑语法
• ES6模块基本上会使UMD（通用模块定义）过时 - 基本上消除了CommonJS和AMD（服务器与浏览器）之间的分裂。

您不太可能看到ES6模块的任何性能优势。即使在浏览器中完全支持ES6功能，您仍然需要一个额外的库来捆绑模块。

另一答案

使用一个优于另一个是否有任何性能优势？

目前的答案是否定的，因为当前的浏览器引擎都没有实现ES6标准的import/export。

一些比较图表http://kangax.github.io/compat-table/es6/没有考虑到这一点，所以当你看到Chrome的几乎所有绿色时，请小心。 ES6中的import关键字未被考虑在内。

换句话说，包括V8在内的当前浏览器引擎无法通过任何JavaScript指令从主JavaScript文件中导入新的JavaScript文件。

（根据ES6规范，我们可能仍然只是a few bugs away或几年之后，直到V8实现它。）

这个document是我们需要的，这个document是我们必须遵守的。

并且ES6标准表示在我们读取模块之前模块依赖应该存在，就像在编程语言C中那样，我们有（头文件）.h文件。

这是一个良好且经过良好测试的结构，我相信创建ES6标准的专家会考虑到这一点。

这使得Webpack或其他软件包捆绑器能够在某些特殊情况下优化软件包，并减少捆绑软件中不需要的依赖关系。但是如果我们有完美的依赖关系，这将永远不会发生。

它需要一些时间，直到import/export原生支持上线，并且require关键字将不会在很长一段时间内去任何地方。

什么是require？

这是加载模块的node.js方式。 （https://github.com/nodejs/node）

Node使用系统级方法来读取文件。当你使用require时，你基本上都依赖它。 require将在某些系统调用中结束，如uv_fs_open（取决于终端系统，Linux，Mac，Windows）来加载JavaScript文件/模块。

要检查这是否属实，请尝试使用Babel.js，您将看到import关键字将转换为require。

另一答案

使用ES6模块可以用于“树摇动”;即启用Webpack 2，Rollup（或其他捆绑包）以识别未使用/导入的代码路径，因此不会将其放入生成的捆绑包中。这可以通过消除您永远不需要的代码来显着减少其文件大小，但默认情况下捆绑了CommonJS，因为Webpack等人无法知道是否需要它。

这是使用代码路径的静态分析完成的。

例如，使用：

import { somePart } 'of/a/package';

...给捆绑者一个暗示，不需要package.anotherPart（如果它没有导入，它不能使用 - 对吗？），所以它不会打扰捆绑它。

要为Webpack 2启用此功能，您需要确保您的转换器不会吐出CommonJS模块。如果您正在使用带有babel的es2015插件，您可以在.babelrc中禁用它，如下所示：

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

Rollup和其他人可能会有不同的工作方式 - 如果您有兴趣，请查看文档。

另一答案

当谈到异步或延迟加载时，import ()更强大。看看我们何时以异步方式需要组件，然后我们使用import以const变量中的某种异步方式使用await。

const module = await import('./module.js');

或者，如果你想使用require()，

const converter = require('./converter');

事情是import()实际上是异步的。正如ReactConf中的neehar venugopal所提到的，您可以使用它来动态加载客户端架构的反应组件。

在路由方面也更好。当用户将特定网站连接到其特定组件时，这是使网络日志下载必要部分的一个特殊事情。例如仪表板之前的登录页面不会下载仪表板的所有组件。因为需要当前即登录组件，只会下载。

同样适用于export：ES6 export与CommonJS module.exports完全相同。

注意 - 如果您正在开发node.js项目，那么您必须严格使用require()，因为如果您将使用invalid token 'import'，节点将抛出异常错误import。因此节点不支持import语句。

更新 - 正如Dan Dascalescu所建议的：自v8.5.0（2017年9月发布）以来，node --experimental-modules index.mjs允许你使用没有Babel的import。你可以（并且应该）也用publish your npm packages as native ESModule, with backwards compatibility来换旧的require方式。

有关使用异步导入的更多信息，请参阅此内容 - https://www.youtube.com/watch?v=bb6RCrDaxhw

另一答案

我个人使用import，因为我们可以使用import导入所需的方法，成员。

import {foo, bar} from "dep";

FileName：dep.js

export foo function(){};
export const bar = 22

归功于Paul Shan。 More info。

另一答案

最重要的是要知道ES6模块确实是官方标准，而CommonJS（Node.js）模块则不是。

在2019年，ES6模块由84%浏览器支持。当Node.js将它们放在--experimental-modules标志后面时，还有一个名为esm的方便节点包，它使集成平滑。

您可能在这些模块系统之间遇到的另一个问题是代码位置。 Node.js假设source保存在node_modules目录中，而大多数ES6模块部署在平面目录结构中。这些并不容易协调，但可以通过使用安装前和安装后脚本来破解package.json文件来完成。这是一个例子isomorphic module和article解释它是如何工作的。