在我正在合作的一个项目中,我们有两个选择可以使用哪个模块系统:
使用require导入模块,使用using module导出模块。Exports和Exports .foo。 使用ES6 import导入模块,使用ES6 export导出模块
使用其中一种是否有性能上的好处?如果我们要使用ES6模块而不是Node模块,还有什么我们应该知道的吗?
在我正在合作的一个项目中,我们有两个选择可以使用哪个模块系统:
使用require导入模块,使用using module导出模块。Exports和Exports .foo。 使用ES6 import导入模块,使用ES6 export导出模块
使用其中一种是否有性能上的好处?如果我们要使用ES6模块而不是Node模块,还有什么我们应该知道的吗?
当前回答
主要优势是句法上的:
更多的声明性/紧凑语法 ES6模块基本上会让UMD(通用模块定义)过时——基本上消除了CommonJS和AMD(服务器vs浏览器)之间的分裂。
使用ES6模块你不太可能看到任何性能上的好处。你仍然需要一个额外的库来捆绑模块,即使在浏览器中完全支持ES6特性。
其他回答
最重要的是要知道ES6模块确实是一个官方标准,而CommonJS (Node.js)模块不是。
2019年,84%的浏览器支持ES6模块。虽然node .js将它们放在——experimental-modules标志后面,但还有一个称为esm的方便的节点包,这使得集成更加顺利。
在这些模块系统之间可能遇到的另一个问题是代码位置。Node.js假定source保存在node_modules目录中,而大多数ES6模块部署在平面目录结构中。解决这些问题并不容易,但可以通过破解你的软件包来实现。带有前后安装脚本的Json文件。这里有一个同构模块的例子和一篇解释它如何工作的文章。
使用ES6模块可以用于“摇树”;例如,启用Webpack 2、Rollup(或其他捆绑程序)来识别未使用/导入的代码路径,因此不会将其放入最终的捆绑程序中。这可以通过消除你永远不需要的代码来显著减少它的文件大小,但是默认情况下与CommonJS绑定,因为Webpack等人无法知道是否需要它。
这是使用代码路径的静态分析来完成的。
例如,使用:
import { somePart } 'of/a/package';
... 给捆扎者一个包装的暗示。anotherPart不是必需的(如果它没有被导入,它就不能被使用——对吧?),所以它不会费心捆绑它。
为了在Webpack 2中启用这个功能,你需要确保你的编译器不会吐出CommonJS模块。如果你正在使用带有babel的es2015插件,你可以像这样在.babelrc中禁用它:
{
"presets": [
["es2015", { modules: false }],
]
}
Rollup和其他工具的工作方式可能不同——如果您感兴趣,请查看文档。
您可能需要考虑以下几种用法/功能:
要求:
你可以动态加载加载的模块名不是 预定义的/静态的,或者你有条件地加载一个模块仅当 它是“真正需要的”(取决于特定的代码流)。 加载 同步的。这意味着如果你有多个需求,它们就是 一个接一个地装载和处理。
ES6进口:
你可以使用 命名导入可选择性地只加载您需要的部分。可以 节省内存。 导入可以是异步的(在当前的ES6 Module Loader中,它实际上是异步的),并且可以执行得更好一些。
同样,Require模块系统也不是基于标准的。现在ES6模块已经存在,它不太可能成为标准。在未来,在各种实现中会有对ES6模块的原生支持,这将在性能方面具有优势。
当涉及到异步或延迟加载时,import()要强大得多。当我们以异步方式需要该组件时,我们会以某种异步方式使用import,例如在const变量中使用await。
const module = await import('./module.js');
或者如果你想使用require(),
const converter = require('./converter');
import()实际上在本质上是异步的。正如neehar venugopal在ReactConf中提到的,你可以使用它来动态加载客户端架构的react组件。
此外,当涉及到路由时,它是更好的方式。这是使网络日志在用户连接到特定网站时下载到其特定组件的一个特殊之处。例如,在仪表板之前的登录页面不会下载仪表板的所有组件。因为什么是需要当前即登录组件,这只会下载。
导出也一样:ES6的导出与CommonJS module.exports完全相同。
注:如果你正在开发一个node.js项目,那么你必须严格使用require(),因为如果你将使用import,节点将抛出异常错误作为无效的令牌'import'。所以node不支持import语句。
更新-根据Dan Dascalescu的建议:自v8.5.0(2017年9月发布)以来,node -experimental-modules索引。mjs让你不用Babel就可以使用import。你也可以(也应该)将你的npm包作为原生ESModule发布,并向后兼容旧的require方式。
在哪里使用异步导入,请参见https://www.youtube.com/watch?v=bb6RCrDaxhw
我个人使用import,因为我们可以通过import导入所需的方法和成员。
import {foo, bar} from "dep";
文件名:dep.js
export foo function(){};
export const bar = 22
这要归功于单霁翔。更多信息。