ESModule加载方式有哪些？详解JS模块化加载

学习文章要努力，但是不要急！今天的这篇文章《JS模块加载方式有哪些？ES Module详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

ES Module是目前JavaScript模块加载的主流方案，通过import和export实现静态、标准化的模块机制，支持Tree Shaking、动态导入和代码分割，提升性能与维护性，推荐新项目优先使用。

JavaScript实现模块加载，现在最主流且官方推荐的方式就是通过ES Module（ESM）。它彻底改变了我们组织和复用代码的方式，解决了过去全局变量污染、依赖管理混乱等一系列老大难问题。简单来说，ESM提供了一套内置的、标准化的机制来定义和使用模块，让代码结构更清晰，也更容易维护和优化。

解决方案

ES Module的核心在于import和export这两个关键词。它们是声明性的，意味着在代码执行前，模块的依赖关系就已经被确定了，这为很多编译时优化，比如Tree Shaking，打下了基础。

定义一个模块很简单，你只需要用export关键字把你想暴露出去的变量、函数、类等标记出来。比如：

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Calculator {
  constructor() {
    console.log('Calculator initialized');
  }
  multiply(a, b) {
    return a * b;
  }
}

// 也可以默认导出一个
export default function subtract(a, b) {
  return a - b;
}

然后，在另一个文件中，你可以用import来引入这些模块：

// main.js
import { PI, add, Calculator } from './utils.js'; // 命名导入
import sub from './utils.js'; // 默认导入

console.log(PI); // 3.14159
console.log(add(2, 3)); // 5

const calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20

console.log(sub(10, 3)); // 7

// 动态导入：import() 返回一个 Promise，可以在运行时按需加载
document.getElementById('loadButton').addEventListener('click', async () => {
  const { add } = await import('./utils.js');
  console.log('Dynamically loaded add function:', add(10, 20));
});

在浏览器环境中，使用ES Module需要将script标签的type属性设置为module：

    
    
    


    Load More
    
    

而在Node.js环境中，你需要确保文件以.mjs结尾，或者在package.json中设置"type": "module"，这样Node.js才会将其识别为ES Module。否则，它会默认按CommonJS规范来处理.js文件。

ES Module的设计理念，从一开始就考虑到了浏览器环境的异步特性。它默认就是严格模式，且模块顶层的this是undefined，这和浏览器全局环境下的window或CommonJS模块中的module.exports都不同，避免了一些意外的副作用。

ES Module与CommonJS：它们到底有什么不同，我该怎么选？

这俩兄弟，说实话，经常让人有点迷糊，尤其是在Node.js里，它们有时候还能混着用。但从根本上讲，ES Module和CommonJS（Node.js早期广泛使用的模块系统）在设计哲学和实现机制上有挺大区别。

首先是语法。ESM用的是import和export，非常直观，而且是语言层面的标准。CommonJS则是require()和module.exports（或者exports），这是Node.js运行时提供的一套API。

再来是加载机制。ESM是静态的，这意味着在代码执行前，模块的依赖关系就已经确定了。你可以想象成，在编译阶段，或者说在浏览器解析