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

Question

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

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

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

Answer 1

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

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

CommonJS和ES6模块之间存在技术差异,例如CommonJS允许您动态加载模块.ES6不允许这样做,但是有一个API正在开发中.

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

Answer 2

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

要求:

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

ES6进口:

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

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

Answer 3

截至目前 ES6 导入，导出始终编​​译为 CommonJS，因此使用其中之一没有任何好处。虽然推荐使用 ES6，因为当浏览器的本机支持发布时它应该是有利的。原因是，您可以从一个文件导入部分文件，而使用 CommonJS，您必须需要所有文件。

ES6 → import, export default, export

CommonJS → require, module.exports, exports.foo

以下是这些的常见用法。

ES6 导出默认

// hello.js
function hello() {
  return 'hello'
}
export default hello

// app.js
import hello from './hello'
hello() // returns hello

ES6导出多个导入多个

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
export { hello1, hello2 }

// app.js
import { hello1, hello2 } from './hello'
hello1()  // returns hello1
hello2()  // returns hello2

CommonJS 模块.exports

// hello.js
function hello() {
  return 'hello'
}
module.exports = hello

// app.js
const hello = require('./hello')
hello()   // returns hello

CommonJS module.exports 多个

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
module.exports = {
  hello1,
  hello2
}

// app.js
const hello = require('./hello')
hello.hello1()   // returns hello1
hello.hello2()   // returns hello2

Answer 4

主要优点是句法:

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

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

Answer 5

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

目前的答案是否定的,因为当前的浏览器引擎都没有实现import/exportES6标准.

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

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

(根据ES6规范,在V8实现之前,我们可能仍然只是几个或几年之后.)

这个文件是我们需要的,而这个文件是我们必须服从.

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.

Answer 6

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

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

例如,使用:

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

...给捆绑商一个package.anotherPart不需要的提示(如果它没有被导入,它不能被使用 - 对吗？),所以它不会打扰捆绑它.

要为Webpack 2启用此功能,您需要确保您的转换器不会吐出CommonJS模块.如果您正在使用es2015带有babel 的插件,则可以将其禁用为.babelrc:

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

汇总和其他人可能会有不同的工作方式 - 如果您有兴趣,请查看文档.

Answer 7

当涉及异步或延迟加载时,import ()则更强大.看看我们何时以异步方式需要组件,然后我们import以某种异步方式使用它,就像const使用变量一样await.

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

或者如果你想使用require()那么,

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

事情是import()实际上是异步的性质.如由neehar venugopal提到ReactConf,可以用它来动态加载反应客户端体系结构组件.

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

同样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让您在import没有Babel的情况下使用.您可以(也应该)将您的npm包发布为本机ESModule,并具有 旧require方式的向后兼容性.

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

Answer 8

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

在2019年，84％的浏览器都支持ES6模块。虽然Node.js的把他们身后的--experimental模块的标志，也有一个方便的节点包叫ESM，这使得整合顺利。

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

Answer 9

I personally use import because, we can import the required methods, members by using import.

import {foo, bar} from "dep";

FileName: dep.js

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

Credit goes to Paul Shan. More info.

Answer 10

• ES 模块是静态的，这意味着导入是在每个模块的顶层以及任何控制流语句之外进行描述的。这是行不通的：

  if (condition) {
     import module1 from 'module1'
  }
  

但在commonjs中，是允许的：

if (condition) {
    module = require('module1')
}

• ES 模块在strict mode. 这意味着我们不必在每个文件的开头显式添加“use strict”语句。严格模式无法禁用；因此，我们不能使用未声明的变量或 with 语句或具有仅在非严格模式下可用的其他功能。strict mode是一种更安全的执行模式。

• 在 ESM 中，一些重要的 CommonJS 引用没有定义。这些包括 require , exports , module.exports , __filename,和__dirname。

• 我们可以使用标准导入语法从 ESM 导入 CommonJS 模块。但只有default exports工作：

     import packageName from 'commonjs-package' // Works
    import { moduleName } from 'commonjs-package' // Errors
  

但是，无法从 CommonJS 模块导入 ES 模块。

• ESM 无法直接将 JSON 文件作为模块导入，这是 CommonJS 中经常使用的功能。这就是为什么在reactjs中fetch使用api。

  import data from './data.json' //fails