前端的全栈Deno篇(五):与前端保持一致的模块化方案,摆脱ERR_REQUIRE_ESM和mjs、cjs等模块混乱带来的心智负担

在现代JavaScript开发中,模块化系统的演变经历了多次变革,使得前端和后端开发人员在选择模块加载方式时常常感到困惑。尤其是Node.js所采用的CommonJS和ESM(ECMAScript Modules)两种模块体系,以及文件扩展名的多样性(如.cjs.mjs.js)带来的复杂性和混乱。Deno的诞生以及其2.0版本带来的模块化系统,正试图解决这些问题,并为开发者提供一种更统一、符合Web标准的模块化方案。

写这篇文章的原因就是,今天使用llamaindex,被其混乱的第三方模块折腾麻了,本来只是简单测试,后面不得不改了模块类型,都是因为cjs和ejs混用导致的,而且 cjs和mjs模块的导入需要加后缀!简直不可忍受

Node.js模块化系统的演变与挑战

Node.js最早采用的模块化方案是CommonJS,这是为了让开发者能够在Node环境中编写模块化代码而提出的方案。通过require()方法,CommonJS实现了模块的导入与导出。然而,这种模块化方式是基于服务器端环境而设计的,与浏览器中的模块加载机制存在较大差异。

随着ES6(也称为ES2015)的发布,JavaScript正式引入了标准化的模块化机制——ESM(ECMAScript Modules)。ESM通过importexport语法,使得模块化变得更加规范化和易于理解。然而,由于Node.js在最初阶段只支持CommonJS,导致这两种模块化方案在Node.js中长期共存。

在Node.js中,当使用ESM模块时,需要使用文件扩展名.mjs或者在package.json中指定"type": "module",而CommonJS模块通常使用.cjs扩展名或默认的.js扩展名。这种双重模块系统的存在,给开发者带来了很多困扰。例如,如果试图在CommonJS模块中使用import语法,或者在ESM模块中使用require(),往往会遇到类似ERR_REQUIRE_ESM的错误。

此外,Node.js对文件扩展名的处理也较为复杂,开发者需要记住何时需要显式指定文件扩展名,何时可以省略,这增加了代码的维护成本和理解难度。这种模块化系统的混乱现状,让很多开发者在使用第三方库、集成旧代码时遇到许多阻碍。

Node.js中的模块化代码示例

以下是Node.js中使用CommonJS和ESM的示例:

CommonJS示例(require()方式):

// commonjs-module.js
module.exports = function() {console.log("Hello from CommonJS");
};
// main.js (CommonJS)
const greet = require("./commonjs-module");
greet();

CommonJS示例(导入导出对象):

// commonjs-object-module.cjs
const greetings = {greetEnglish: function() {console.log("Hello from CommonJS");},greetSpanish: function() {console.log("Hola desde CommonJS");}
};module.exports = greetings;
// main.cjs (CommonJS)
const greetings = require("./commonjs-object-module.cjs"); // 一定要加.cjs后缀
greetings.greetEnglish();
greetings.greetSpanish();

ESM示例(import方式):

// esm-module.mjs
export function greet() {console.log("Hello from ESM");
}
// main.mjs
import { greet } from "./esm-module.mjs";
greet();

在Node.js中,必须根据模块类型选择适当的加载方式,否则可能会遇到各种错误。

Deno的统一模块化方案

为了解决这些痛点,Deno引入了一种更加现代化、统一的模块化系统,并且严格遵循Web标准。Deno最初的设计目标之一就是摆脱Node.js的历史包袱,避免其模块化系统中的种种复杂性。

Web标准的模块化方式

Deno采用了原生的ESM作为其模块系统,彻底抛弃了CommonJS,这意味着开发者在Deno中编写模块时,只需使用标准的importexport语法,无需担心CommonJS和ESM之间的兼容问题。这样一来,代码的可读性和可维护性得到了极大提升。

此外,Deno要求模块必须通过URL或相对路径来加载,并且所有的模块文件都需要明确指定扩展名(例如.js.ts等)。这种设计与浏览器的模块加载方式保持了一致,使得在Deno中编写的代码可以很方便地移植到浏览器环境中,而无需进行额外的改动。

插一嘴,如果没有写扩展名,默认是js - 这时候可以绕过一些检测机制,例如针对文本的加密等

Deno还内置了对TypeScript的支持,开发者可以直接编写TypeScript代码,而不需要额外的编译步骤。这种内置支持使得TypeScript的使用更加自然,并且与ESM的模块化机制无缝集成。

Deno中的模块化代码示例

以下是Deno中使用ESM的示例:

使用ESM的Deno示例:

// greet.ts
export function greet() {console.log("Hello from Deno");
}
// main.ts
import { greet } from "./greet.ts";
greet();

在Deno中,模块的加载方式与浏览器类似,文件扩展名必须明确指定。这使得代码更加直观,也更符合开发者的预期。

模块管理的现代化

与Node.js依赖npm来管理模块不同,Deno没有中央的包管理工具,而是采用URL来直接引入第三方模块。这种方式借鉴了Web的资源加载方式,使得模块的获取过程更加透明和简单,开发者可以直接通过URL查看模块的源代码。这种模块管理方式避免了传统包管理器中的“依赖地狱”,并且使得项目的依赖关系更加清晰。

以下是Deno中通过URL加载第三方模块的示例:

import { serve } from "https://deno.land/std@0.113.0/http/server.ts";const handler = (request: Request): Response => {return new Response("Hello from Deno server!", { status: 200 });
};serve(handler);

通过URL加载模块的方式,使得开发者可以清楚地看到模块的来源,并且减少了对包管理器的依赖。

此外,Deno 2.0引入了deno.json配置文件,使得开发者可以更加灵活地配置项目,类似于Node.js中的package.json,但更加简洁和统一。通过这种配置文件,开发者可以指定TypeScript编译选项、模块路径别名等,从而进一步提高开发体验。

Deno模块化方案的优势

  1. 统一的模块化标准:Deno彻底抛弃了CommonJS,只支持ESM模块,这使得模块化体系变得简单一致,开发者不再需要在CommonJS和ESM之间切换,也避免了常见的ERR_REQUIRE_ESM错误。

  2. 与Web兼容:Deno的模块加载方式与浏览器保持一致,使用URL或相对路径加载模块,并且必须显式指定文件扩展名。这种方式使得代码在Deno和浏览器之间的互操作性更强,减少了跨环境迁移的障碍。

  3. 内置TypeScript支持:Deno直接支持TypeScript,无需额外的配置或编译工具,这使得现代JavaScript开发更加方便,开发者可以充分利用TypeScript的类型系统来提高代码的可靠性。

  4. 模块管理简化:通过直接使用URL加载模块,Deno减少了对包管理器的依赖,避免了包版本冲突等问题,同时也让模块的来源变得更加透明。

总结

Node.js的模块化系统在历史上经历了从CommonJS到ESM的演变,但这种演变带来的兼容性问题和复杂的文件扩展名规则,给开发者带来了很多困扰。而Deno通过采用统一的ESM模块化方案,严格遵循Web标准,彻底解决了这些问题。Deno的2.0版本更是通过deno.json等配置进一步提升了开发者的体验。

对于前端和全栈开发者来说,Deno提供了一种现代化、简洁而统一的开发体验,不再需要为模块化的复杂性而烦恼。它让开发者能够更加专注于代码本身,而不是被各种历史遗留的模块化问题所困扰。如果你还在为Node.js中的模块化混乱而烦恼,不妨尝试一下Deno,相信它会为你带来耳目一新的体验。

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

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

相关文章

qt QBrush详解

1、概述 QBrush是Qt框架中的一个基本图形对象类,它主要用于定义图形的填充模式。QBrush可以用于填充如矩形、椭圆形、多边形等形状,也可以用于绘制背景等。通过QBrush,可以设置填充的颜色、样式(如实心、渐变、纹理等&#xff09…

练习LabVIEW第三十四题

学习目标: 刚学了LabVIEW,在网上找了些题,练习一下LabVIEW,有不对不好不足的地方欢迎指正! 第三十四题: 在一个波形表中显示三条随机数组成的曲线,分别用红,绿,蓝三种…

YOLOv11改进策略【卷积层】| CVPR-2020 Strip Pooling 空间池化模块 处理不规则形状的对象 含二次创新

一、本文介绍 本文记录的是利用Strip Pooling模块优化YOLOv11的目标检测网络模型。Strip Pooling结合了长而窄的卷积核形状在一个空间维度上的长程关系捕捉能力和在另一个空间维度上的局部细节捕捉能力,有效地处理复杂的场景信息。这一机制通过采用 1 N 1N 1N或 N 1 N1 N1的…

Rust:Vec<u8> 与 [u8] 之间的转换

在 Rust 中&#xff0c;Vec<u8> 是一个动态数组&#xff0c;而 &[u8] 是一个指向字节切片的不可变引用。这两者之间经常需要进行转换&#xff0c;因为它们在处理字节数据时非常常见。 从 &[u8] 转换为 Vec<u8> 要将一个字节切片 &[u8] 转换为一个 Ve…

彻底理解链表(LinkedList)结构

目录 比较操作结构封装单向链表实现面试题 循环链表实现 双向链表实现 链表&#xff08;Linked List&#xff09;是一种线性数据结构&#xff0c;由一组节点&#xff08;Node&#xff09;组成&#xff0c;每个节点包含两个部分&#xff1a;数据域&#xff08;存储数据&#xff…

【MySQL系列】字符集设置

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

02- 模块化编程-001 ADC采样与显示

周末把单片机的开发环境理顺了,开始模块化编程的实践&#xff0c;先从外围模块开始&#xff0c;先从独立的模块&#xff0c;然后构建复杂一些的综合应用&#xff0c;条件所限&#xff0c;以protues的仿真为主。 1、单片机内置ADC采样与显示电路 2、电路原理简介 该电路主要由…

PG数据库之表分区

在数据库管理中&#xff0c;随着数据量的不断增加&#xff0c;单表查询性能可能会受到影响。为了解决这一问题&#xff0c;PostgreSQL引入了表分区功能。表分区是一种数据组织方式&#xff0c;通过将大表分割成更小的、更易于管理的部分&#xff08;称为分区&#xff09;&#…

VScode设置系统界面字体

现象&#xff1a; 系统界面字体太大&#xff0c;导致菜单栏字体显示不全&#xff0c;每次使用都要先点然后才能打开终端和帮助 缩小字体应该就可以实现全部都看到的效果 解决步骤 1. “齿轮形状”设置中心---->设置 2.输入zoom 3.用户—>窗口—>修改“Window: Zoom…

在Unity游戏开发在面试时会面试哪些内容?

1、请描述游戏动画有几种&#xff0c;以及其原理。 关键帧动画&#xff1a;每一帧动画序列当中包含了顶点的空间位置信息以及改变量&#xff0c;然后通过插值运算&#xff0c;得出动画效果。选中某一游戏对象&#xff0c;创建animation&#xff0c;添加属性Transform&#xff0…

C++初阶——类和对象(上)

目录 1、类的定义 1.1 类定义格式 1.2 访问限定符 1.3 类域 2、类的实例化 2.1 实例化的概念 3、this指针 1、类的定义 1.1 类定义格式 • class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。…

小北的字节跳动青训营与LangChain系统安装和快速入门学习(持续更新中~~~)

前言 最近&#xff0c;字节跳动的青训营再次扬帆起航&#xff0c;作为第二次参与其中的小北&#xff0c;深感荣幸能借此机会为那些尚未了解青训营的友友们带来一些详细介绍。青训营不仅是一个技术学习与成长的摇篮&#xff0c;更是一个连接未来与梦想的桥梁~ 小北的青训营 X M…

卷积神经网络实验三:模型优化(1)

作者有话说&#xff1a; 这篇文章写的还是比混乱的。因为本人也是第一次做这样的尝试&#xff0c;虽然接触深度学习有一年了&#xff0c;但是对于模型的优化仅仅是局限于理论上。通过这一次的实验&#xff0c;我对于模型的理解也更深了几分。我不期望这篇文章能帮你能解决多大问…

信息安全数学基础(42)分式域

一、定义 设R是一个整环&#xff0c;如果有一个域F使得从R到F有一个单的环同态&#xff0c;并且F中的每一个元素都可以表示成σ(a)σ(b)^(-1)的形式&#xff0c;其中a∈R&#xff0c;b∈R*&#xff08;R的非零元构成的乘法群&#xff09;&#xff0c;那么把F称为R的分式域。 二…

HTML 基础概念:什么是 HTML ? HTML 的构成 与 HTML 基本文档结构

文章目录 什么是 HTML &#xff1f;HTML 的构成 &#xff1f;什么是 HTML 元素&#xff1f;HTML 元素的组成部分HTML 元素的特点 HTML 基本文档结构如何打开新建的 HTML 文件代码查看 什么是 HTML &#xff1f; HTML&#xff08;超文本标记语言&#xff0c;HyperText Markup L…

brew 下载过慢, 切换使用国内源

brew 下载过慢, 切换使用国内源 1.尝试brew install graphviz的时候&#xff0c;总是报错&#xff0c;或者跑到国外官网&#xff0c;下载太长时间 2. 更新国内的清华的源&#xff0c;中科大的源&#xff0c;结果brew update的时候要很久 最后用阿里的brew源&#xff0c; 发现…

文本列的性能优化?深入Oracle全文索引

一.什么是全文索引&#xff1f; 全文索引通过分析和处理文本&#xff0c;将文档中的单词分解为词条&#xff08;tokens&#xff09;&#xff0c;然后存储词条与其所在文档的映射关系。这使得数据库可以快速定位包含特定关键字的记录&#xff0c;而不必对所有文本逐字匹配。 二…

CentOS7配置静态IP(非解决方法指导,纯笨蛋记录)

一、这篇博客算是记录我终于解决我安装的虚拟机ping不通外网的问题&#xff0c;前前后后我尝试了很多次花了很多时间&#xff0c;最后弄完发现其实都是因为我之前根本不知道什么是虚拟机的网络配置。。。。。 这个链接介绍了vmware虚拟机三种网络模式及配置详解_vmware 特定虚…

数据丢失不用愁!10款必备的数据恢复软件全介绍

现在我们使用微信的频率愈发高涨&#xff0c;不论是生活、工作&#xff0c;甚至是兴趣还好可能都能在这个软件里看到身影。正因为它涉及了我们的生活如果因为病毒或者其他原因导致聊天记录清空&#xff0c;对很多人来说都很麻烦。那么微信聊天记录删了怎样才能恢复呢&#xff0…

国内版Sketchfab平台 - CG美术之家(3D编辑发布篇)

CG美术之家为您提供了一个简便的模型上传流程&#xff0c;让发布您的3D模型变得轻而易举。只需准备好通用的3D模型格式&#xff0c;如OBJ、FBX或STL&#xff0c;您就可以轻松上传并分享您的创作。我们的平台支持在线3D渲染&#xff0c;您只需花费不到一分钟的时间&#xff0c;就…