ES模块化

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模块。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据分析 | NumPy

NumPy,全称是 Numerical Python,它是目前 Python 数值计算中最重要的基础模块。NumPy 是针对多维数组的一个科学计算模块,这个模块封装了很多数组类型的常用操作。 使用numpy来创建数组 import numpy as npdata np.array([1, 2, 3]) print…

Unity中UGUI中的PSD导入工具的原理和作用

先说一下PSD导入工具的作用,比如在和美术同事合作开发一个背包UI业务系统时,美术做好效果图后,程序在UGUI中制作好界面,美术说这个图差了2像素,那个图位置不对差了1像素,另外一个图大小不对等等一系列零碎的…

文件包含漏洞(input、filter、zip)

一、PHP://INPUT php://input可以访问请求的原始数据的只读流,将post请求的数据当作php代码执行。当传入的参数作为文件名打开时,可以将参数设为php://input,同时post想设置的文件内容,php执行时会将post内容当作文件内容。从而导致任意代码…

ngnix安装配置

通过yum -y install nginx的方式,有时候会出现No package nginx available的报错。迟迟无法解决。此时要通过下载安装包的方式安装。 1、下载安装包:官方网址 2、解压缩: tar -xzvf nginx-1.23.4.tar.gz cd nginx-1.23.4.tar.gz 3、源码包…

pycharm里test connection连接成功,但是无法同步服务器文件,deployment变灰

如果服务器test connection连接成功,但是无法同步文件。 可以尝试以下方式: 点击tools-deployment-browse remonte host,选择要连接的服务器的文件夹 如果能正常显示服务器文件夹,再点击tools-deployment,注意要把要…

echarts设置柱形图柱间距离

不同系柱形图柱间距离(barGap) {type: bar,itemStyle: {normal: {color: #ddd}},silent: true,barWidth: 40,barGap: 10%, //设置负值 不同系的柱形图会实现重叠效果data: [60, 60, 60, 60] },同系柱形图柱间距离(barCategoryGap&#xff…

谈谈对数据库索引的认识

索引的概念 索引是一种特殊的文件,包含着对数据表里所有记录的引用指针。 可以对表中的一列或多列创建索引,并指定索引的类型,各类索引有各自的数据结构实现。 索引的作用 默认情况下,进行条件查询操作,就是遍历表&a…

27. 移除元素 (Swift版本)

题目描述 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出…

【蓝桥杯每日一题】填充颜色超详细解释!!!

为了让蓝桥杯不变成蓝桥悲,我决定在舒适的周日再来一道题。 例: 输入: 6 0 0 0 0 0 0 0 0 1 1 1 1 0 1 1 0 0 1 1 1 0 0 0 1 1 0 0 0 0 1 1 1 1 1 1 1 输出: 0 0 0 0 0 0 0 0 1 1 1 1 0 1 1 2 2 1 1 1 2 2 2 1 1 2 2 2 2 1 1…

渐开线花键环规的几种加工方法

小伙伴们大家好,今天咱们聊一聊渐开线花键环规的几种加工方法。 渐开线花键环规是在汽车、摩托车以及机械制造工业应用非常广泛的一种检测量具。它属于是一种内花键齿轮,其精度和表面粗糙度要求都比较高。采用的加工方法也比较多,下面详细看…

Spring MVC文件上传配置

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 文件上传 Spring MVC文件上传基于Servlet 3.0实现;示例代码如下: Overrideprotected void customizeRegistration(ServletRegistration.Dynamic reg…

C语言-memcpy(不重复地址拷贝 模拟实现)

memcpy&#xff08;不重复地址拷贝&#xff09; 语法格式 在C语言中&#xff0c;memcpy 是一个标准库函数&#xff0c;用于在内存之间复制数据。它的原型定义在 <string.h> 头文件中。memcpy 的语法格式如下&#xff1a; c void *memcpy(void *destination, const voi…

2024全新返佣商城分销商城理财商城系统源码 全开源PHP+VUE源码

2023全新返佣商城分销商城理财商城系统源码 全开源PHPVUE源码 程序安装环境要求&#xff1a; nginx1.16 php7.2 mysql5.6 程序全开源PHPVUE源码 有需要测试的老铁&#xff0c;拿去测试吧

KKVIEW远程: 安卓免费远程控制软件

安卓免费远程控制软件&#xff1a;方便、实用且高效 在数字化日益增长的今天&#xff0c;远程控制软件正变得越来越重要。无论是在家庭环境还是工作环境中&#xff0c;它们都能为我们提供便利。特别是在移动设备上&#xff0c;如安卓设备&#xff0c;这种需求更为明显。幸运的是…

基于高斯模型的运动目标检测(车辆检测),Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

RTC协议与算法基础 - RTP/RTCP

首先&#xff0c;需要说明下&#xff0c;webrtc的核心音视频传输是通过RTP/RTCP协议实现的&#xff0c;源码位于src/modules/rtp_rtcp目录下&#xff1a; 下面让我们对相关的内容基础进行简要分析与说明&#xff1a; 一、TCP与UDP协议 1.1、TCP协议 TCP为了实现数据传输的可…

C到C++的敲门砖-2

文章目录 引用内联函数auto关键字基于范围的for循环指针空值nullptr后记 引用 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用的变量共用同一块内存空间。 所谓引用就是给变量起别名&am…

uwsgi+nginx+django 部署学习

收集静态文件及部署配置 DEBUG False STATICFILES_DIRS [os.path.join(BASE_DIR, "static"), ] STATIC_ROOT /data/static python3 manage.py collectstatic 收集静态文件&#xff0c;成功后可在STATIC_ROOT目录查看 安装依赖 pip3 install uwsgi django项目结…

浅谈如何自我实现一个消息队列服务器(1)——需求分析

文章目录 一、什么是消息队列&#xff1f;二、当下主流的消息队列(MQ)三、自我实现一个消息队列服务器的前期准备——需求分析3.1 核心概念3.2 broker server 核心概念3.2.1、虚拟主机&#xff08;Virtual Host&#xff09;3.2.2、交换机&#xff08;Exchange&#xff09;3.2.2…

Apache-Doris基础概念

OLAP数据库Doris 一、Doris架构二、基本概念1. Row & Column2. Partition & Tablet3. 建表示例&#xff08;1&#xff09;列的定义&#xff08;2&#xff09;分区分桶&#xff08;3&#xff09;多列分区&#xff08;4&#xff09;PROPERTIES&#xff08;5&#xff09;E…