模块化规范之ES Modules && CommonJS 规范 学习笔记

最新推荐文章于 2024-08-08 18:47:52 发布
最新推荐文章于 2024-08-08 18:47:52 发布
阅读量926 收藏
点赞数
分类专栏： 前端工程化 文章标签： node.js es6 ecmascript6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51457459/article/details/115958206
版权
本文详细探讨了模块化的发展，重点介绍了ES Modules和CommonJS规范。ES Modules特性包括自动启用严格模式，导出导入的规则，以及在浏览器和Node环境中的使用。文章还讨论了它们的差异，浏览器兼容性问题，以及如何在Node环境中支持和交互。同时，通过Babel可以在不支持ESM的环境中使用它。
摘要由CSDN通过智能技术生成

模块化开发

一、模块化发展的过程

下面是一篇关于前端模块化发展的文章

模块化在不同环境的使用：
浏览器环境： ES Modules 模块化规范
Node环境： CommonJS 模块化规范

二、ES Modules 特性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- script标签执行时立即执行加载脚本， defer 属性会在页面渲染完之后执行脚本 -->
  <!-- 给script标签 设置type = module 来告知当前script标签中的代码采用ESM的规范来执行 -->
  <!-- <script type="module"></script> -->
  <!-- ESM的基本特性 -->
  <!-- 1. 自动采用严格模式 -->
  <script type="module">
    console.log(this) // undefined
  </</
最低0.47元/天 解锁文章
Reborn酱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES Modules 与 CommonJS 的比较及互动
shea_mong
03-31 282
一、ES Modules in Node.js ES Modules 是 JavaScript 的语言层面的模块化标准，会逐渐统一所有 JS 领域的模块化需求。 Node.js 作为 JavaScript的一个重要应用领域，它逐步支持这一个特性。从 V8.5版本之后，内部就已经以实验的方式去支持ESM 了。启动 node 的时候， 需要加 experimental-modules，这个参数 表示启用 ESM 的实验特性。Nodejs v12.17.0 LTS 版发布，去掉 --experimental-m
ES Module 和 CommonJS
m0_60703077的博客
01-17 2308
一、前言 早期的 JavaScript 作为一种脚本语言，其产生的目的只是为了简单的表单验证或动画实现。 并且不需要分离多个 js 文件来写，功能相对简单。只需要内嵌一个 script 标签即可。 ajax 的出现，前后端也分离，前端更新数据接口。 SPA 的出现，前端页面复杂化，前端路由、状态管理。 Node 的出现， JavaScript 编写复杂的后端程序。模块化的需要日趋明显。 在 JavaScript 还没有推出模块化的解决方案之前，社区涌现出许多的模块化规范。如：AMD、CMD、C
JS模块化详解
最新发布
weixin_44101835的博客
08-08 386
JS本身是为了简单页面设计的补充：页面动画，表单提交，并不会内置命名空间或者模块化的概念。1.开始时：需要再页面中增加不同类型的js的文件，如：动画js，验证js，格式化js。随着业务的飞速发展，涌现除了大量的模块化的诉求 => JS模块化解决方案的出现。完成了一个模块的封装，实现了一个对外暴露功能，保留变量+不污染全局作用域。2.多种js为了维护和可读性，被分在了不同的js文件中。相比较一个js文件，多个js文件是最简单模块化的思想。AMD支持向前兼容，以提供回调的方式来加载同步模块。
CommonJS和ESM：JavaScript模块化规范对比
CreatorRay的博客
08-05 986
在现代的JavaScript开发中，模块化是一个至关重要的概念，它有助于将代码拆分为独立的、可维护的部分，使开发过程更加高效和可靠。在JavaScript社区中，有两种主要的模块化规范：CommonJS（通用模块化规范）和ESM（ECMAScript模块）规范。本文将深入探讨这两种规范的异同点、应用场景以及注意事项。
ESModule 浏览器兼容性
mogii's blog
01-13 204
import 浏览器兼容性 export 浏览器兼容性
esModule与CommonJS(Node)
Moon Star
08-23 437
esModule 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 export命令 export var firstName = 'Michael'; export var year = 1958; export function multiply(x, y) { return x * y; ...
es6 modules 和commonjs
weixin_34258782的博客
09-20 88
参考文章：https://wohugb.gitbooks.io/ecmascript-6/content/docs/class.html 　　　http://javascript.ruanyifeng.com/nodejs/module.html 转载于:https://www.cnblogs.com/wdx330616/p/7562035.html...
关于es6 module和common.js互通的babel规范
前端361
12-20 421
es6module和common.js互通时，最大的问题是能否正确引用到default的值 关于该issue，babel给出了官方解释，这里做一个记录总结： 核心代码： //help _interopRequireDefault 函数。 function _interopRequireDefault(obj) { return obj && obj.__esMod...
Commonjs 和 Es Module
Lc_style的博客
11-15 1887
Commonjs的特性： CommonJS 模块由 JS 运行时实现。 CommonJs 是单个值导出，本质上导出的就是 exports 属性。 CommonJS 是可以动态加载的，对每一个加载都存在缓存，可以有效的解决循环引用问题。 CommonJS 模块同步加载并执行模块文件。 Es module的特性： ES6 Module 静态的，不能放在块级作用域内，代码发生在编译时。 ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。 ..
一文彻底搞懂前端模块化：CommonJS规范 与 ES Module规范
热门推荐
欢迎访问我的主页：https://www.bookbook.cc
03-25 3万+
一文彻底搞懂前端模块化：exports、module.exports、export、import、export default CommonJS规范、ES Module规范
node.js入门之CommonJS 模块
蛐蛐的博客
01-01 289
文档：Modules: CommonJS modules | Node.js v17.3.0 Documentation 1.简介 在node.js模块系统中，每个文件都被视为一个模块，如foo.js const prefix = 'foo' exports.say = (s) => console.log(prefix+s); exports.name = 'foo'; 通过在exports对象上添加属性，将函数和对象添加到模块的根 模块本地的变量是私有的，因为模块文件本身被包装
JavaScript学习总结(二)——Module模式（CommonJS）
new_start_2018的博客
07-02 2057
文章目录一、 Module模式的基础1. 经典Module模式2.Revealing Module（揭示模块）模式3. Singleton（单例）模式二、Module模式的实现1.CommonJS模块1.1 NodeJS简介1.2 NodeJS中CommonJS的介绍1.2.1 Module对象1.2.2 require()函数的介绍1.2.3 CommonJS中模块的循环加载1.2.4 编写CommonJS模块2. ECMAScript 6中的模块2.1 基本语法2.2 ES6模块的特点2.2.1 ES6
模块化加载与commonjs
qq_40944918的博客
09-16 153
模块化加载与commonjs 一个js文件对应就是一个模块文件 es5不支持原生的模块化，它是以script引入进来 node为了模块化，引入了commonJS规范 commonJS： 方便团队开发 方便与模块的管理 一个模块就是做你这个模块只要的事 es6中 模块 export 变量名=变量值 引入 <script type="module">import {...
前端JS 模块规范 CommonJS、CMD、AMD、ESM
qq_36873261的博客
11-14 1214
CommonJS nodejs所采用的模块规范 导出模块：exports.myModule = function 或者 module.exports = {} 导入模块：var myModule = require("路径") CMD(Common Module Definition，通用模块定义) 引入模块加载器：&lt;script src="base/lib/sea.js" type="te...
module 和 commonJS
m0_46622443的博客
05-26 420
ES6 模块与 CommonJS 模块的差异 CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用 CommonJS 模块一旦输出一个值，模块内部的变化就影响不到这个值。除非输出一个可以返回内部值的函数,才能得到内部变动后的值。 ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。（JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。原始值变了，import加载的值
Js常用公共方法库CommonHelper(持续更新)
小黄瓜要编程的博客
08-11 1749
Js 函数节流 函数柯里化 函数绑定 自定义高级事件
ES6模块化与CommonJs模块化
hinataneji的博客
12-04 509
ES6模块化与CommonJs模块化
Commonjs和ES6模块化
qq_24293765的博客
04-21 293
commonjs模块化解决方案 commonjs导入导出需要底层解析器如webpack的支持，无法直接使用下面的格式导入导出 CommonJS的导出 语法： module.exports={...} CommonJs中使用module.exports导出变量及函数，也可以导出任意类型的值，看如下案例 // 导出一个对象 module.exports = { name: "蛙人", age: 24, sex: "male" } // 导出任意值 module.exports.nam
commonjs 与 esm 的区别
weixin_33816300的博客
06-06 6152
js 社区存在多种模块化规范，其中最常使用到的是 node 本身实现的 commonjs 和 es6 标准的 esm。 commonjs 和 esm 存在多种根本上的区别，详细的比较在阮一峰的《es6标准入门》已经写得很详细了，这里我想用自己的思路重新总结一下。同时分析一下 babel 对于 esm 的编译转换，存在的局限。 commonjs 和 esm 的主要区别可以概括成以下几点： 输出拷贝...
前端模块化(CMJ和ESM)
darabiuz的博客
01-18 2796
12 es6模块化 在ES6出现之前，JS不像其他语言拥有“模块化”这一概念，比如python的import，就连css也有@import，于是为了支持JS模块化，我们使用类、立即执行函数或者第三方插件(RequireJS、seaJS)来实现模块化，在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。es6成为浏览器和服务器通用的模块解决方案。 一个文件就是一个模块, 模块中的数据都是私有的，ES6模块化模块和NodeJS中一样, 可
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值