5 分钟比较理解 require() vs import()

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

我们都知道 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()

image.png

1. 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 引擎静态分析(编译阶段)，先于其他模块执行，所以报错；

1. 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 
}

1. 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 }) => {
  // ...·
});

1. import() 是异步的；

在使用 require 命令加载模块时，就会运行整个模块的代码；

import 虽然写在文件顶部，但是脚本执行时，只有在碰到这个只读变量的时候，才执行被加载的模块（异步加载）

image.png

小结：不仅要注意区分 require() vs import()，也要注意区分 import x from './xxx' 和 import (./xxx) 的差异；

我是掘金安东尼，输出暴露输入，技术洞见生活，再会~