模块化规范

模块化规范有哪些

• commonjs：commonjs是 nodejs 的模块化规范，使用 require和module.exports 导入和导出模块。
• esm：esm是es6的模块化规范，使用 import和export导入和导出模块。
• umd：umd是commonjs和esm的混合体，同时兼容 commonjs 和 esm。
• iife：立即执行函数

不同模块化规范的文件后缀

• commonjs(cjs)：后缀 .cjs
• esm：后缀 .mjs / .js
• umd：后缀 .umd.js / .js
• iife：后缀 .js

CommonJS 与 ESM（ECMAScript Modules） 的区别

CommonJS 模块通常用于服务器端（Node.js），在浏览器端需要使用工具进行转译或打包。 ESM（ECMAScript Modules） 模块是浏览器原生支持的，可以直接在现代浏览器中使用，不需要额外的转译工具。

1. 加载时机
   • CommonJS：同步加载
   • ESM：静态加载的，模块在解析时加载，在代码执行之前就被加载，因此具有更早的加载时机。
2. 依赖关系
   • CommonJS：模块的依赖关系是动态的，意味着模块可以在运行时根据条件加载不同的依赖。
   • ESM：模块的依赖关系是静态的，依赖关系在模块加载之前就确定，不能根据条件改变依赖关系。
3. 导出方式
   • CommonJS：使用 module.exports 来导出模块，可以导出任意类型的值，包括函数、对象、类等。
   • ESM：使用 export 和 import 关键字来导出和导入模块。导出时需要明确指定导出的变量、函数或类，导入时也需要明确指定要导入的内容。
4. 静态分析
   • CommonJS：模块的依赖关系无法在编译时静态分析，这对一些工具的性能和优化产生了挑战。
   • ESM：模块的依赖关系可以在编译时进行静态分析，这有助于提高性能和优化。

在 js 中，import 导入和 require 的写法有什么区别？

执行时机：

• require 运行时动态加载，代码执行到时才加载。具有动态特性，可以在代码任意位置使用
• import 编译时静态加载，在代码执行前结束。必须放在模块顶部，不能在条件语句中使用