一文弄懂JS模块、模块格式，模块加载器和模块打包器

前言

目前现代化的JS开发方式大行其道。撸代码时，你可能也会不理解为啥要使用这些繁复的现代化工具。

接下来我们就来一起学习下js模块、模块化解决方案、模块加载器和模块打包器的区别。

本文的主要是帮大家快速理解现代前端JS开发的概念，并不会深入去探讨每种工具和模式。

什么是模块？

模块是一块可复用的代码。它封装了实现细节，对外提供公开的API以便其他代码可以轻松加载和使用。

为啥要使用模块？

从技术应用的角度来说，模块并不是必须的。

模块化是一种代码组织方式。开发者们从六七十年代开始在各种编程语言中以多种形式使用了。

在JS中，模块化理想情况下应该允许我们：

• 抽象代码：将功能实现抽离到特定的库，使用者无需去关注复杂的内部实现逻辑。

• 封装代码：如果不希望代码被修改，则将代码隐藏在模块中。

• 复用代码：以避免重复写相同的代码。

• 管理依赖：轻松改变依赖而无需重写我们的代码。

ES5中的模块模式

ES5及更早之前的版本，在设计时并没有考虑到模块机制。随着时间的推移，开发者想出了多种方式在JS中模拟实现模块机制。

这里我们介绍2个简单的实现方式。

Immediately Invoked Function Expression(IIFE)

(function(){
    // ...dosomething
})()

IIFE本质上定义一个立即执行的匿名函数。

要注意的是匿名函数是被括号围起来的，在JS中，如果代码行是以关键字function开始，表示声明一个函数。

// 函数声明
function(){
    console.log('test');
}

直接调用函数声明会报错：

// 直接调用函数声明
function(){
    console.log('test');
}()

// => Uncaught SyntaxError: Unexpected token )

通过给函数加上圆括号，使其成为一个函数表达式:

// 函数表达式
(function() {
  console.log("test