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

简介: 我们都知道 require() 和 import() 都是用于导入模块的,但是它们差别大有不同,本篇 5 分钟带你进行比较理解~ 轻松易读,温故知新。

image.png

我们都知道 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) 的差异;


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


相关文章
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
959 1
|
JavaScript
js中数组reduce的使用原来这么简单
js中数组reduce的使用原来这么简单
|
JSON JavaScript 前端开发
JavaScript 中更现代的深拷贝方法!
JavaScript 中更现代的深拷贝方法!
685 0
|
6月前
|
人工智能 安全 API
深入理解OpenClaw技术架构与实现原理(上)
本文深度剖析OpenClaw——当前最热门的个人AI助手系统,涵盖其本地优先、多端联动的总体架构,以及Gateway网关、Agentic Loop、定时任务、工具系统、Channels连接生态、上下文管理、SubAgent子智能体等16大核心模块。全文以AI-Coding实现为特色,强调安全沙箱、协议化设计与自进化能力,展现新一代软件构建范式的开山之作。
深入理解OpenClaw技术架构与实现原理(上)
|
6月前
|
人工智能 运维 API
零代码上手!阿里云计算巢部署OpenClaw全流程+Skills集成+百炼API配置及避坑全攻略
2026年,AI自动化办公进入规模化落地阶段,OpenClaw(前身为Clawdbot、Moltbot)作为轻量级开源AI代理平台,凭借“自然语言指令驱动、多工具协同、零编程门槛”的核心优势,成为个人与轻量团队解锁自动化办公的首选工具。它无需复杂操作,仅需输入日常口语化指令,就能自动完成文档整理、邮件处理、日程规划、代码生成、跨平台数据同步等重复性工作,堪称“7×24小时不下班的私人AI数字员工”,彻底解放双手、提升效率。
643 3
|
6月前
|
存储 数据采集 机器学习/深度学习
大模型应用:大模型越大越好?模型参数量与效果的边际效益分析.51
本文揭示大模型“参数量越大效果越好”的误区,详解边际效益递减规律:小模型(1B→7B)提升显著,中等模型(7B→13B)仍具性价比,而超大模型(70B→175B)效果几无增长却大幅增加算力与存储成本。通过控制变量、量化指标与曲线分析,指导读者科学选型——找到效果与成本平衡的最优参数阈值。
1700 14
|
JavaScript
如何动态执行 JS 脚本
这篇文章介绍了在业务开发中动态执行JS脚本的几种方法,包括使用eval()函数、setTimeout、动态创建script标签以及使用Function构造函数。这些方法各有特点,如eval()同步执行且作用域为当前执行作用域,动态script标签同步执行且作用域为全局作用域等,具体实现方案需根据业务场景选择。
407 0
|
运维 前端开发 JavaScript
半夜服务器告警不再错过!运维人员必备的语音通知方案
为解决深夜服务器宕机错过告警的问题,本文介绍一款专为个人开发者与运维人员设计的语音通知方案。通过电话直接推送重要告警,确保第一时间响应,避免故障扩大。支持多种编程语言调用,配置简单,3步即可完成,实时性强,适合各类关键业务场景。
1000 5
|
网络架构
Vue3 系列:vue-router
Vue3 系列:vue-router
450 2
|
JavaScript
Vue 中mixin 的用法
【10月更文挑战第18天】Vue 中mixin 的用法
359 3

热门文章

最新文章