我们都知道 require()
和 import()
都是用于导入模块的,但是它们差别大有不同,本篇 5 分钟带你进行比较理解~ 轻松易读,温故知新。
惟书有色,艳于西子;惟文有华,秀于百卉。—— 皮日休
- require()
在 Node.js 中,require() 是一个内置函数,用于导入单独文件的外部模块;require() 可以读取 JavaScript 文件,执行它,并返回导出的对象。Require 不仅可以添加内置的核心 NodeJS 模块,还允许添加本地模块;
var myVar = require('http'); //to use built-in modules var myVar2 = require('./myLocaModule'); //to use local modules
- import()
import() 通常与 export() 成对出现,用于引入 ES 模块,属于 ES6 规范。它们只允许在 ES 模块中使用,无法使用它们导入具有其它文件类型(如 .json)的其它模块。可以用于导入以路径 URL 形式的资源或包名;如果 Script 脚本没有设置 type='module',则不能使用 import 语句;
var myVac = import("module-name");
- require() vs import()
- require() 可以在任何地方被调用
通常,我们在文件开头调用 import() 或 require() 语句。但实际上,你可以在代码中的任何位置调用 require(),而 import() 语句只能在文件开头定义。在别处使用 import() 语句,会报错:要求移动到文件的开头。
// 报错 if (x > 2) { import a from "./a"; } ///repl: 'import' and 'export' may only appear at the top level (2:2)
import 命令会被 JS 引擎静态分析(编译阶段),先于其他模块执行,所以报错;
- require() 可以放在条件判断里面
代码如下:
//require if(user.id == 1){ const getBlogTitle = require(‘./blogDetails.js’); } //import if(...) { import ...; // Error, not allowed! } { import ...; // Error, we can't put import in any block }
- ES 模块也可以动态调用
虽然上面说 import 写法不能放在条件判断里,但是 ES 模块也是支持动态调用的:
它的写法是 import (./xxx)
,而非 import x from './xxx'
此点非常重要,注意区分!
//dynamic import let {hi, bye} = await import('./say.js'); hi(); // Hello! bye(); // Bye! //OR let say = await import('./say.js'); say.hi(); // Hello! say.bye(); // Bye!
import() 加载模块成功以后,这个模块会作为一个对象,当作 then 方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
import("./myModule.js").then(({ export1, export2 }) => { // ...· });
- import() 是异步的;
在使用 require 命令加载模块时,就会运行整个模块的代码;
import 虽然写在文件顶部,但是脚本执行时,只有在碰到这个只读变量的时候,才执行被加载的模块(异步加载)
小结:不仅要注意区分 require() vs import()
,也要注意区分 import x from './xxx'
和 import (./xxx)
的差异;
我是掘金安东尼,输出暴露输入,技术洞见生活,再会~