在我正在合作的一个项目中,我们有两个选择可以使用哪个模块系统:
使用require导入模块,使用using module导出模块。Exports和Exports .foo。 使用ES6 import导入模块,使用ES6 export导出模块
使用其中一种是否有性能上的好处?如果我们要使用ES6模块而不是Node模块,还有什么我们应该知道的吗?
在我正在合作的一个项目中,我们有两个选择可以使用哪个模块系统:
使用require导入模块,使用using module导出模块。Exports和Exports .foo。 使用ES6 import导入模块,使用ES6 export导出模块
使用其中一种是否有性能上的好处?如果我们要使用ES6模块而不是Node模块,还有什么我们应该知道的吗?
当前回答
更新
自Node v12(2019年4月)以来,默认启用了对ES模块的支持,自Node v15(2020年10月)以来,它是稳定的(见这里)。包含节点模块的文件必须以.mjs或最近的包结尾。Json文件必须包含“type”:“module”。Node文档有更多的信息,还有关于CommonJS和ES模块之间的互操作。
在性能方面,新特性总是有可能没有现有特性优化得那么好。但是,由于模块文件只计算一次,所以性能方面可能会被忽略。最后,您必须运行基准测试以获得明确的答案。
ES模块可以通过import()函数动态加载。与require不同,this返回一个promise。
以前的回答
使用其中一种是否有性能上的好处?
请记住,目前还没有原生支持ES6模块的JavaScript引擎。你自己说过你在使用通天塔。无论如何,Babel默认将导入和导出声明转换为CommonJS (require/module.exports)。因此,即使你使用ES6模块语法,如果你在Node中运行代码,你将在底层使用CommonJS。
CommonJS和ES6模块之间有一些技术上的差异,例如CommonJS允许你动态加载模块。ES6不允许这样做,但有一个正在开发的API。
因为ES6模块是标准的一部分,所以我会使用它们。
其他回答
ES模块是静态的,这意味着导入是在每个模块的顶层描述的,并且在任何控制流语句之外。这是行不通的: If(条件){ 从'module1'导入module1 }
但是在commonjs中,它是允许的:
if (condition) {
module = require('module1')
}
ES modules run implicitly in strict mode. This means that we don't have to explicitly add the "use strict" statements at the beginning of every file. Strict mode cannot be disabled; therefore, we cannot use undeclared variables or the with statement or have other features that are only available in non-strict mode. strict mode is a safer execution mode. In ESM, some important CommonJS references are not defined. These include require , exports , module.exports , __filename, and __dirname. We can import CommonJS modules from ESM by using the standard import syntax. But only default exports work: import packageName from 'commonjs-package' // Works import { moduleName } from 'commonjs-package' // Errors
但是,从CommonJS模块中导入ES模块是不可能的。
ESM不能直接将JSON文件作为模块导入,这个特性在CommonJS中使用非常频繁。这就是为什么在reactjs中使用fetch api。 从'./data导入数据。json / /失败
我个人使用import,因为我们可以通过import导入所需的方法和成员。
import {foo, bar} from "dep";
文件名:dep.js
export foo function(){};
export const bar = 22
这要归功于单霁翔。更多信息。
使用ES6模块可以用于“摇树”;例如,启用Webpack 2、Rollup(或其他捆绑程序)来识别未使用/导入的代码路径,因此不会将其放入最终的捆绑程序中。这可以通过消除你永远不需要的代码来显著减少它的文件大小,但是默认情况下与CommonJS绑定,因为Webpack等人无法知道是否需要它。
这是使用代码路径的静态分析来完成的。
例如,使用:
import { somePart } 'of/a/package';
... 给捆扎者一个包装的暗示。anotherPart不是必需的(如果它没有被导入,它就不能被使用——对吧?),所以它不会费心捆绑它。
为了在Webpack 2中启用这个功能,你需要确保你的编译器不会吐出CommonJS模块。如果你正在使用带有babel的es2015插件,你可以像这样在.babelrc中禁用它:
{
"presets": [
["es2015", { modules: false }],
]
}
Rollup和其他工具的工作方式可能不同——如果您感兴趣,请查看文档。
更新
自Node v12(2019年4月)以来,默认启用了对ES模块的支持,自Node v15(2020年10月)以来,它是稳定的(见这里)。包含节点模块的文件必须以.mjs或最近的包结尾。Json文件必须包含“type”:“module”。Node文档有更多的信息,还有关于CommonJS和ES模块之间的互操作。
在性能方面,新特性总是有可能没有现有特性优化得那么好。但是,由于模块文件只计算一次,所以性能方面可能会被忽略。最后,您必须运行基准测试以获得明确的答案。
ES模块可以通过import()函数动态加载。与require不同,this返回一个promise。
以前的回答
使用其中一种是否有性能上的好处?
请记住,目前还没有原生支持ES6模块的JavaScript引擎。你自己说过你在使用通天塔。无论如何,Babel默认将导入和导出声明转换为CommonJS (require/module.exports)。因此,即使你使用ES6模块语法,如果你在Node中运行代码,你将在底层使用CommonJS。
CommonJS和ES6模块之间有一些技术上的差异,例如CommonJS允许你动态加载模块。ES6不允许这样做,但有一个正在开发的API。
因为ES6模块是标准的一部分,所以我会使用它们。
不确定为什么(可能是优化-延迟加载?)它是这样工作的,但我注意到,如果导入的模块不使用,导入可能无法解析代码。 在某些情况下,这可能不是预期的行为。
以讨厌的Foo类为例。
foo.ts
export default class Foo {}
console.log('Foo loaded');
例如:
index.ts
import Foo from './foo'
// prints nothing
index.ts
const Foo = require('./foo').default;
// prints "Foo loaded"
index.ts
(async () => {
const FooPack = await import('./foo');
// prints "Foo loaded"
})();
另一方面:
index.ts
import Foo from './foo'
typeof Foo; // any use case
// prints "Foo loaded"