【JS】一文弄懂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");
});
// => 返回 function(){ console.log('test') }

函数表达式返回一个函数，因此我们可以直接调用它：

// IIFE：立即执行函数表达式
(function() {
console.log("test");
})();
// => console中打印字符串 'test'

IIFE 带来的好处：

  • 将代码的复杂性封装到 IIFE 中，我们无需关注其实现。

  • 在 IIFE 中定义变量，避免对全局作用域造成污染。

不过，IIFE 没有提供依赖管理机制。

Revealing Module partten

Revealing Module partten 与 IIFE 类似，不同之处是它把IIFE的返回值赋给一个变量。

// 将模块导出为一个全局变量
var singleton = (function() {
// 内部逻辑
function sayHello() {
console.log("Hello");
}
// 对外暴露的 API
return {
sayHello: sayHello,
};
})();

这里我们没有把匿名函数放在括号内，因为function关键字没有在行首。

// 访问模块的方法
singleton.sayHello();
// => Hello

除了导出单例对象，模块还可以导出一个构造函数：

// 将模块暴露为全局变量
var Module = function() {
// 内部逻辑
function sayHello() {
console.log("Hello");
}
// 导出 API
return {
sayHello: sayHello,
};
};

注意，我们没有在声明时立即执行函数。

相反，我们使用模块的构造函数来实例化一个模块：

var module = new Module();

访问模块的公共 API：

module.sayHello();
// => Hello

这种模式的好处与 IIFE 相同，不过同样它也不能给开发者提供依赖管理的机制。

随着JS的发展，衍生了很多种模块定义语法，每种语法都有各自的优点和缺点。我们称之为模块格式。

模块格式

模块格式是我们用来定义一个模块的语法。

ES6出现之前，JS没有提供官方的模块定义语法。因此，聪明的开发者们提出了多种定义模块的方式。

一些广为使用的模块格式有：

  • Asynchronous Module Definition（AMD）

  • CommonJS

  • Universal Module Definition（UMD）

  • System.register

  • ES6 Module

下面我们快速过一下每种模块定义的方式。

AMD

AMD模块运行在浏览器环境下，它使用define函数来定义模块。

define(['dep1', 'dep2'], function (dep1, dep2) {
return function () {};
});

CommonJS

CommonJS模块运行在nodejs环境下，它使用 require 管理依赖，module.exports 来定义模块。

var dep1 = require('./dep1');
var dep2 = require('./dep2');
module.exports = function(){
// ...
}

UMD

UMD模块可以同时运行在浏览器和Nodejs环境下。

(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('b'));
} else {
root.returnExports = factory(root.b);
}
}(this, function (b) {
return {};
}));

System.register

System.register 模块的设计意图是在ES5中支持ES6 模块语法：

import { p as q } from './dep';
var s = 'local';
export function func() {
return q;
}
export class C {
}

ES6 module

从ES6开始，js提供了原生的模块机制。它使用export向外暴露API：

// lib.js
// 对外导出sayHello
export function sayHello(){
console.log('Hello');
}
// 不对外导出
function somePrivateFunction(){
// ...
}

使用import导入另一个模块中的API：

import { sayHello } from './lib';
sayHello();

为导入的API使用别名：

import { sayHello as say } from './lib';
say();
// => Hello

导入整个模块：

import * as lib from './lib';
lib.sayHello();
// => Hello

模块中定义默认导出项：

// lib.js
// 导出默认函数
export default function sayHello(){
console.log('Hello');
}
// 导出非默认函数
export function sayGoodbye(){
console.log('Goodbye');
}

然后使用如下方式导入：

import sayHello, { sayGoodbye } from './lib';
sayHello();
// => Hello
sayGoodbye();
// => Goodbye

导出一切你想导出的内容：

// lib.js
// 导出默认函数
export default function sayHello(){
console.log('Hello');
}
// 导出非默认函数
export function sayGoodbye(){
console.log('Goodbye');
}
// 导出简单值
export const apiUrl = '...';
// 导出对象
export const settings = {
debug: true
}

遗憾的是，不是所有的浏览器都支持了原生的模块语法。不过我们在代码中使用原生的模块语法，然后借助babel等转译工具将ES6模块语法转译成ES5所支持的AMD或CommonJS等模块语法。

模块加载器

模块加载器负责解析和加载以特定模块语法定义的模块。模块加载器在运行时执行：

  • 首先在浏览器中加载模块加载器

  • 告诉模块加载器应用的js入口文件

  • 加载器去下载并解析js入口文件

  • 加载器按需下载所有的js文件

打开浏览器的调试面板，你会看到加载器按需加载的js文件。

以下是两个常见的模块加载器：

  • RequireJS：AMD模块加载器

  • SystemJS：CommonJS、AMD、UMD以及System.register 模块加载器

模块打包器

打包器可以替换加载器。不过与加载器不同，打包器是在构建时运行：

  • 使用打包器生成一个js文件（例如app.js）

  • 在浏览器中加载该文件

如果你在浏览器的调试工具的网络面板中，只会看到浏览器只加载了一个文件。浏览器中不需要模块加载器。所有的代码都被打包在了一个js文件中。

列举几个常见打包器：

  • webpack

  • rollup

  • browserify

总结

为了更好地理解现代JS开发环境中的各种工具，理解模块、模块格式、模块加载器和模块打包器之间的区别很重要。

模块是可复用的代码片段，它封装了实现细节，并对外暴露一个公开API，以便其他代码加载使用。

模块格式是用来定义模块的语法。很早之前就已经出现了各种模块格式，如AMD，CommonJS，UMD和System.register。从ES6开始原生提供了模块定义语法。

模块加载器在运行时解释并加载以特定模块格式编写的模块，常见的加载器有RequireJS和SystemJS。

模块打包器可以替代模块加载器。它在构建时生成一个 包含所有代码的JS包。常见的打包器有webpack、rollup和browserify。

好啦，读到这里相信你已经对现代JS开发的知识有了更好地理解了。

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

以上是 【JS】一文弄懂JS模块、模块格式，模块加载器和模块打包器 的全部内容， 来源链接： utcz.com/a/99237.html

回到顶部