当前位置: 首页 > news >正文

require 与 import 两种引入模块方式到底有什么区别?

关于JavaScript 的模块化规范,可以移步至: 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」

下面进入正题

requireimport 两种引入模块方式,到底有什么区别呢?

大致可以分为以下几个方面:

一、写法上

  • require/exports 的用法:

    const path = require('path')
    exports.path = path
    module.exports = path
    
  • import/export 的用法:

    import path from 'path'
    import {default as path} from 'path'
    import * as path from 'path'
    import { dirname } from 'path'
    import { dirname as dir } from 'path'
    import path, {dirname} from 'path'export default path
    export const path
    export function dirname
    export {dirname}
    export * from 'path'
    

二、执行顺序

  • require:不具有提升效果,到底加载哪一个模块,只有运行时才知道。

    const path = './' + fileName;
    const myModual = require(path);
    
  • import:具有提升效果,会提升到整个模块的头部,首先执行。

    // import 的执行早于foo的调用。本质就是 import 命令是编译阶段执行的,在代码运行之前。foo();import { foo } from 'my_module';
    

三、输入值的区别

  • require 输入的变量,基本类型数据是赋值,引用类型为浅拷贝,可修改。

  • import 输入的变量都是只读的,如果输入 a 是一个对象,允许改写对象属性。

    // a.js
    let obj = {foo() {console.log('obj...foo');}
    }
    export {obj
    }// b.js
    import { obj } from '/a.js'// 非法操作
    obj = {}; // Syntax Error : 'a' is read-only; 
    // Uncaught TypeError: Assignment to constant variable.// 合法操作
    obj.foo = 'hello'; 
    

四、是否可以使用表达式或变量

  • require:可以使用表达式和变量

    let a = require('./a.js')
    a.add()let b = require('./b.js')
    b.getSum()
    
  • import:静态执行,不能使用表达式和变量,因为这些都是只有在运行时才能得到结果的语法结构。

    // 报错
    import { 'f' + 'oo' } from 'my_module';// 报错
    let module = 'my_module';
    import { foo } from module;// 报错
    if (x === 1) {import { foo } from 'module1';
    } else {import { foo } from 'module2';
    }
    

总结

require/exportsimport/export 本质上的区别,实际上也就是 CommonJS 规范与 ES Module 的区别。

  1. 浏览器在不做任何处理时,默认是不支持 importrequire
  2. babel 会将 ES6 模块规范转化成 CommonJS 规范;
  3. webpackgulp 以及其他构建工具会对 CommonJS 进行处理,使之支持浏览器环境
    它们有三个重大差异。
    • CommonJS 模块输出的是一个值的拷贝,ES Module 输出的是值的引用。
    • CommonJS 模块是运行时加载,ES Module 是编译时输出接口。

      导致该差异是因为 CommonJS 加载的是一个对象(即 module.exports 属性),该对象只有在脚本运行完才会生成。而 ES Module 不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

    • CommonJS 模块的 require() 是同步加载模块,ES Module 的 import 命令是异步加载,有一个独立的模块依赖的解析阶段。

关于 CommonJS 规范与 ES Module 的区别,大家可以移步至: 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」 进行阅读。

相关文章:

require 与 import 两种引入模块方式到底有什么区别?

关于JavaScript 的模块化规范,可以移步至: 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」 下面进入正题 require 与 import 两种引入模块方式,到底有什么区别呢? 大致可以分为以下几个方面&#…...

软考信息系统监理师备考建议

用好备考方法,两三个月就可以过的。信息系统监理师备考最好以教材和历年真题为主,教学视频模拟题为辅。考试介绍与复习建议:考试设置的科目包括:(1)信息系统工程监理基础知识,考试时间150分钟&a…...

第八届蓝桥杯省赛——4承压计算(二维数组,嵌套循环)

题目:X星球的高科技实验室中整齐地堆放着某批珍贵金属原料。每块金属原料的外形、尺寸完全一致,但重量不同。金属材料被严格地堆放成金字塔形。7 5 8 7 8 8 9 2 7 2 8 1 4 9 1 8 1 8 8 4 1 7 9 6 1 4 5 4 5 6 5 5 6 9 5 6 5 5 4 7 9 3 5 5 1 7 5 7 9 7 4…...

【ECNU】3645. 莫干山奇遇(C++)

目录 题目 输入格式 输出格式 样例 提示 思路 代码 题目 单点时限: 2.0 sec 内存限制: 512 MB 出题人当然是希望出的题目有关 oxx,于是想方设法给题目配上一些有关 oxx 的背景故事,使得它看起来不那么无趣。但有的时候却无法引入合适的小姐姐&…...

为什么需要学习shell、shell的作用

课程基于B站于超课程笔记 03 Shebang的正确玩法_哔哩哔哩_bilibili P1 shell的作用 P2 shell执行命令的流程 P3 Shebang的正确玩法 什么是shell及组成 shell概念 shelll组成 Shebang概念 /bin/sh /bin/bash一样,都是指向一个bash解释器 [rootlocalhost ~]#…...

pgsql-Create_ALTER_GRANT_REVOKE命令语法

pgsql-Create_ALTER_GRANT_REVOKE命令语法 资料 语法约定 CREATE ROLE ALTER ROLE GRANT授权 REVOKE回收授权 权限类型说明 语法约定 下面的约定被用于命令的大纲:方括弧([和])表示可选的部分(在 Tcl 命令里,使…...

【linux】:进程概念

文章目录 冯诺依曼体系结构一:操作系统二: 进程总结冯诺依曼体系结构 我们常见的计算机,如笔记本。我们不常见的计算机,如服务器,大部分都遵守冯诺依曼体系。 冯诺依曼体系如下图: 那么输入设备有哪些呢&#xff1f…...

创建对象的方式和对属性的操作

javaScript支持多种编程范式,包括函数式编程和面向对象编程,javaScript的对象被设计成一组属性的无序集合,由key和value组成。 创建对象的两种方式 早期使用创建对象方式最多的是使用Object类,使用new关键字来创建一个对象&…...

GO时间相关操作说明

文章目录 GO时间相关操作时间转换成字符串字符串转换成时间时间戳和时间操作时间比较操作时间增加和减少操作休眠操作time.AfterFunc操作time.NewTicker操作GO时间相关操作 ​ GO语言在使用时间转换的时候会用到2006-01-02 15:04:05 这是固定参数写法,类似java语言中的yyyy-M…...

选择和分支结构

选择和分支结构选择和分支结构一、复习问答二、选择结构2.1 基础选择结构2.2 if-else结构2.3 多重if结构2.4 嵌套if结构三、分支结构四、局部变量选择和分支结构 一、复习问答 1、Java中基本数据类型 2、类型的转换的两种情形 3、数据类型提升的规则 二、选择结构 2.1 基础选…...

Elasticsearch总结笔记

文章目录简介类型增删改查操作索引原理简介 底层使用的lucene引擎,lucene引擎直接使用相对复杂,有一定的学习成本,同样是使用Java编写,Elasticsearch使用的rest风格的进行交互,而数据呢则是以JSON的方式进行传输。学习…...

Ubuntu 安装指定版本 Mysql,并设置远程连接(以安装mysql 5.5 为例)

目录 一、安装Mysql 1、卸载Mysql(可跳过) 2、安装mysql 软件源 3、安装mysql 5.5 4、验证测试 二、设置远程登录 1、允许使用root账号远程连接 2、Mysql 允许远程登录 一、安装Mysql 1、卸载Mysql(可跳过) 如果之前安装…...

NumPy:Python中的强大数学工具

NumPy:Python中的强大数学工具 文章目录NumPy:Python中的强大数学工具一、NumPy简介二、创建数组三、数组尺寸四、数组运算五、数组切片六、数组连接七、数据存取八、数组形态变换九、数组排序与搜索十、矩阵与线性代数运算一、NumPy简介 当谈到数据科学…...

Hbase资源隔离操作指南

1.检查集群的环境配置 1.1 HBase版本号确认> 5.11.0 引入rsgroup的Patch: [HBASE-6721] RegionServer Group based Assignment - ASF JIRA RegionServer Group based Assignment 社区支持版本:2.0.0 引入rsgroup的CDH版本 5.11.0 https://www.…...

TPS2012B泰克Tektronix隔离通道示波器

简  述: 复杂环境中开发和测试你的设计,进行浮动或差 分测量;100MHz,2通道 主要特点和优点 100 MHz和200 MHz带宽 高达2 GS/s的实时采样率 2条或4条全面隔离和浮动通道,外加隔离外部触 发 在安装两块电池时可以连续…...

9.4 PIM-DM

实验目的 熟悉PIM-DM的应用场景掌握PIM-DM的配置方法 实验拓扑 实验拓扑如图9-28所示&#xff1a; 图9-28&#xff1a;PIM-DM 实验步骤 &#xff08;1&#xff09;IP地址的配置 MCS1的配置如图9-29所示&#xff1a; 图9-29&#xff1a;配置MCS1的IP地址 R1的配置 <Huawe…...

程序员推荐的良心网站合集!

今天来给大家推荐几个程序员必看的国外良心网站合集。 IBM developer 技术性很强的博客网站&#xff0c;网站自带真实示例代码和架构解决方案&#xff0c;大家可以在上面找到适合自己的语言方向开始学习交流。 https://developer.ibm.com/ infoq 技术论坛社区&#xff0c;内…...

信息安全概论之《密码编码学与网络安全----原理与实践(第八版)》

前言&#xff1a;在信息安全概论课程的学习中&#xff0c;参考了《密码编码学与网络安全----原理与实践&#xff08;第八版&#xff09;》一书。以下内容为以课件为主要参考&#xff0c;课本内容与网络资源为辅助参考&#xff0c;学习该课程后作出的总结。 一、信息安全概述 1…...

跬智信息全新推出云原生数据底座玄武,助力国产化数据服务再次升级

2月28日&#xff0c;跬智信息&#xff08;Kyligence&#xff09;宣布全新推出国产化云原生数据底座开源项目玄武&#xff08;XUANWU&#xff09;&#xff0c;以助力企业加速数据平台上云&#xff0c;并实现国产化升级。玄武&#xff08;XUANWU&#xff09;是在容器化技术上形成…...

【离线数仓-9-数据仓库开发DWS层设计要点-DWS层汇总表以及数据装载】

离线数仓-9-数据仓库开发DWS层设计要点-DWS层汇总表以及数据装载离线数仓-9-数据仓库开发DWS层设计要点-DWS层汇总表以及数据装载一、交易域用户商品粒度订单最近1日/N日汇总表1.交易域用户商品粒度订单最近1日汇总表2.交易域用户商品粒度订单最近N日汇总表二、交易域优惠券粒度…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...