ES模块化

news2025/1/1 22:11:56

Node.js默认并不支持ES模块化,如果需要使用可以采用两种方式。方式一,直接将所有的js文件修改为mjs扩展名。方式二,修改package.json中type属性为module。

导出

默认导出

// 向外部导出内容
export let a = 10
export const b = "孙悟空"
export const c = { name: "猪八戒" }
export default function sum(a, b) {
    return a + b
}
import sum, { a } from "./m4.mjs"

在这里插入图片描述

默认导出的内容,可以随意命名。导入的时候把sum改为别的名字也没问题。默认导出不写括号里面,其他导出要写在对象里,注意默认导出后面得是一个具体的值,不能是语句,可以是对象函数之类的。
在这里插入图片描述

  • 导出变量(命名导出)
export let name1, name2,, nameN; 
export let name1 =, name2 =,, nameN; 

  • 导出函数(命名导出)
export function functionName(){...}

  • 导出类(命名导出)
export class ClassName {...}
  • 重命名导出
export { variable1 as name1, variable2 as name2,, nameN };

  • 解构赋值后导出
export const { name1, name2: bar } = o;

  • 默认导出
export default expression;
export default function () {} // also class, function*
export default function name1() {} // also class, function*
export { name1 as default,};

  • 聚合模块
export * from …; // 将其他模块中的全部内容导出(除了default)
export * as name1 from …; // ECMAScript® 2O20 将其他模块中的全部内容以指定别名导出
export { name1, name2,, nameN } from …; // 将其他模块中的指定内容导出
export { import1 as name1, import2 as name2,, nameN } from …; // 将其他模块中的指定内容重命名导出
export { default,} from …; 

导入(官方标准:es不能省略扩展名)

通过模块化导入的内容都是常量
在这里插入图片描述
当我们尝试修改a的值会发现报错,提示我们常量不可修改。

TypeError: Assignment to constant variable.
    at file:///C:/Users/24665/Desktop/pink/02_%E6%A8%A1%E5%9D%97%E5%8C%96/04_%E6%A8%A1%E5%9D%97%E5%8C%96.mjs:30:3
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)    

Node.js v19.3.0
  • 引入默认导出
import defaultExport from "模块的相对路径";

  • 将所有模块导入到指定命名空间中
import * as name from "模块的相对路径";

  • 引入模块中的指定内容
//解构赋值
import { export1 } from "模块的相对路径";
import { export1 , export2 } from "模块的相对路径";
//或
const name = require("./m3").name

  • 以指定别名引入模块中的指定内容
import { export1 as alias1 } from "模块的相对路径";
import { export1 , export2 as alias2 , [...] } from "模块的相对路径";

  • 引入默认和其他内容
import defaultExport, { export1 [ , [...] ] } from "模块的相对路径";
import defaultExport, * as name from "模块的相对路径";

  • 引入模块
import "module-name";

默认情况下,node中的模块化标准是CommonJs

要想使用ES的模块化,可以采用以下两种方式。
1.使用mjs作为扩展名
输出module时,在CommonJs中不报错
在这里插入图片描述
但是在CommonJs不报错
在这里插入图片描述
如图,把扩展名换为.mjs之后再打印就会出错。
方法二
修改package.json文件
在这里插入图片描述
修改package.json将模块化规范设置为ES模块。
在这里插入图片描述
当我们设置"type":"module”时,当前项目下所有的js文件都默认为ES模块。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1524929.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安卓安装Magisk面具以及激活EdXposed

模拟器:雷电模拟器 安卓版本: Android9 文中工具下载链接合集:https://pan.baidu.com/s/1c1X3XFlO2WZhqWx0oE11bA?pwdr08s 前提准备 模拟器需要开启system可写入和root权限 一、安装Magisk 1. 安装magisk 将magisk安装包拖入模拟器 点击&#xff1a…

数据结构/C++:红黑树

数据结构/C:红黑树 概念实现基本结构插入uncle为红色节点uncle为黑色节点 总代码展示 概念 红黑树是一种二叉搜索树,一般的二叉搜索会发生不平衡现象,导致搜索效率下降,于是学者们开始探索如何让二叉搜索树保持平衡,这…

玩转C语言——数组初探

一、前言 通过前面的学习,我们已了解C语言的结构变量、分支结构和循环结构。今天,我们一起来认识C语言的另一知识点——数组。先赞后看,养成习惯。 二、数组概念 学习数组,我们要明白数组是什么。在我看来:数组是⼀组…

macOS 安装 NetLogo 6.4.0

netlogo 下载地址 NetLogo-6.4.0.dmg参考 netlogo 官网

sqllab第二十七关通关笔记

知识点&#xff1a; union select 关键字过滤 通过<> /**/进行截断处理 un<>ion sel<>ect 没效果uni/**/on sel/**/ect 被过滤了双写绕过 这关对select进行了多重过滤&#xff0c;无法进行双写绕过 大小写绕过 UNion SElect (这关可以用&am…

单片机第四季-第二课:uCos2源码-BSP

1&#xff0c;初始uCos2 文件中uC开头的为uCos相关的。 2&#xff0c;uCos2源码工程建立 建立Source Insight工程 寻找main函数 (1)RTOS其实就是一个大的裸机程序&#xff0c;也是从main开始运行的 (2)main之前也是有一个汇编的启动文件的 (3)main中调用了很多初始化函数 bsp部…

linux——进程(1)

目录 一、概念 1.1、认识进程 1.2、进程描述符&#xff08;PCB&#xff09; 1.3、进程的结构体&#xff08;task_struct&#xff09; 二、查看进程 三、获取进程的Pid和PPid 3.1、通过系统调用获取进程的PID和PPID 四、创建进程 4.1、fork() 4.2、用if进行分流 五、…

【PyTorch】基础学习:一文详细介绍 torch.save() 的用法和应用

【PyTorch】基础学习&#xff1a;一文详细介绍 torch.save() 的用法和应用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f44…

SpringCloudAlibaba系列之Seata实战

目录 环境准备 1.下载seata安装包 2.修改配置文件 3.准备seata所需配置文件 4.初始化seata所需数据库 5.运行seata 服务准备 分布式事务测试 环境准备 1.下载seata安装包 Seata-Server下载 | Apache Seata 本地环境我们选择稳定版的二进制下载。 下载之后解压到指定目录…

HTML设置语言

一、代码示例 相关代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>HTML设置语言</title> </head> <body><marquee>我爱你</marquee> <!-- …

2024年 前端JavaScript Web APIs 第三天 笔记

3.1-表单全选反选案例 <!DOCTYPE html><html><head lang"en"><meta charset"UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid …

CentOS 7 编译安装 Git

CentOS 7 编译安装 Git 背景来源删除旧版本 Git安装依赖包下载 Git 源代码检验相关依赖&#xff0c;设置安装路径编译安装添加 Git 环境变量重新加载配置文件查看版本号参考文献 背景来源 为什么要安装新版本呢&#xff1f; 因为无聊&#xff0c;哈哈哈&#xff0c;其实也不是…

【matlab】如何批量修改图片命名

【matlab】如何批量修改图片命名 (●’◡’●)先赞后看养成习惯&#x1f60a; 假如我的图片如下&#xff0c;分别是1、2、3、4、5的命名 需求一&#xff1a;假如现在我需要在其后面统一加上_behind字符串&#xff0c;并且保留原命名&#xff0c;同时替换掉原先的图片&#xf…

论文阅读——RSGPT

RSGPT: A Remote Sensing Vision Language Model and Benchmark 贡献&#xff1a;构建了一个高质量的遥感图像描述数据集&#xff08;RSICap&#xff09;和一个名为RSIEval的基准评估数据集&#xff0c;并在新创建的RSICap数据集上开发了基于微调InstructBLIP的遥感生成预训练…

【Visual Studio】VS转换文件为UTF8格式

使用高级保存选项 更改VS的编码方案 首先需要打开高级保存选项 然后打开 文件 —> 高级保存选项 即可进行设置

Git——分支详解

目录 Git分支1、开始使用分支1.1、新增分支1.2、更改分支名称1.3、删除分支1.4、切换分支1.5、切换分支时1.6、要切换到哪个分支&#xff0c;首先要有那个分支 2、分支原理2.1、单个分支2.2、多个分支2.3、切换分支时的逻辑1、更新暂存区和工作目录2、变更HEAD的位置 2.4、如果…

微信小程序之tabBar

1、tabBar 如果小程序是一个多 tab 应用&#xff08;客户端窗口的底部或顶部有 tab 栏可以切换页面&#xff09;&#xff0c;可以通过 tabBar 配置项指定 tab 栏的表现&#xff0c;以及 tab 切换时显示的对应页面。 属性类型必填默认值描述colorHexColor是tab 上的文字默认颜色…

代码随想录day23(2)二叉树:从中序与后序遍历序列构造二叉树(leetcode106)

题目要求&#xff1a;根据一棵树的中序遍历与后序遍历构造二叉树。 思路&#xff1a;408的经典题目&#xff0c;思路和手撕的思路差不多&#xff0c;先从后序中找到根节点&#xff0c;再从中序中找到此节点&#xff0c;然后分割成左右子树&#xff0c;记录一下左右子树的节点个…

【MySQL】MySQL事务

文章目录 一、CURD不加控制&#xff0c;会有什么问题&#xff1f;二、事务的概念三、事务出现的原因四、事务的版本支持五、事务提交方式六、事务常见操作方式七、事务隔离级别1.理解隔离性12.隔离级别3.查看与设置隔离性4.读未提交【Read Uncommitted】5.读提交【Read Committ…

问题解决:关于tomcat无法连接问题的解决

安装tomcat并配置环境变量 下载tomcat并安装 首先去tomcat官方网站,下载tomcat 进入tomcat官方网站之后&#xff0c;查看jdk应该对应的tomcat版本&#xff0c;点击图示的按钮 点击完毕之后&#xff0c;可以看到下述的页面 图中的表格可以看到对应的jdk版本与tomcat的版本之…