面试题-JS模块化以及模块打包器

如今的前端已经是一套非常复杂的体系了,甚至延伸出来了所谓“微前端”的概念。而支撑这些复杂逻辑的前提就是模块化的概念。

但是,我在和很多的同学沟通(做技术摸底)的过程中,却发现:很多同学并不清楚模块化的知识。

这不,这两天就有个同学在面试中被问到了这个问题:

面试官:能说下你理解的 JS 模块化是什么吗?

这个说实话,开发天天用,但是猛地这么一背问,很多同学都没有回答的很好。

所以说,今天咱们就借助这边文章,来说一说:模块化 以及 模块打包器!

什么是模块?

在JavaScript中,模块就像一个单独的代码包,我们可以在程序的不同部分中使用它。

该包被封装在指定的范围内,可重用易于维护

图片[1]-面试题-JS模块化以及模块打包器-编程社

如上图所示:它可以通过将代码分解为更易于使用的、更小的部分 来帮助保持代码的组织性。

通常情况下:每一个 JS 文件都将是一个模块! 所以,我们可以 简单的 把一个模块理解为一个 js 文件(注意:这只是简单的理解)

JS的模块化体系

最初的时候,JS 是不支持任何模块系统的。所以,就产生了很多 社区模块化规范,比较常见的有:

  1. AMD
  2. CMD
  3. UMD

不过好处是,这些模块化规范,在现在的开发中几乎已经不可见了。除了 UMD 规范,在库打包中依然存在。

所以,从目前来看,我们不需要深入了解它们。

虽然,以上的社区化规范,我们不需要深入了解。但是,目前常用的 两种 模块化方式,大家必须要知道:

  1. CommonJS:主要应用在 Node 端。以 module.exports 导出,以 require 导入。
module.exports = {
  name: '张三'
}
-----
const {name} = require('路径')
  1. ES6 Module:主要应用在 浏览器端。以 export(按需导出) 或者 export default(默认导出) 导出,以 import 导入
export const name = '张三' // 可以写多个

// 一个模块(JS文件)只能写一个
export default {
  name: '李四'
}
-----
import {name} from '路径' // 按需导入
import obj from '路径' // 默认导入

模块打包器

常见的模块打包器有很多,比如:Webpack、Vite、Rollup、Parcel、Browserify 等等。

他们的作用主要是:把一个或多个模块,按照执行的顺序添加到 html 文件中

打包出来的的内容,一般被称为 bundle

图片[2]-面试题-JS模块化以及模块打包器-编程社

而随着前端项目的复杂度越来越高,这些打包器也被赋予了更多的能力,比如:

  • 使用Tree Shaking过程从包中删除未使用的代码
  • 通过减少获取模块所需的 HTTP 请求数量来优化 Javascript 的加载
  • 还包括代码压缩、捆绑包分割和代码分块等功能,以进一步优化捆绑包大小
  • 甚至还而已自定义 loader 或 plugin 来赋予它们更多的能力

答案

那么最后,让我们回答这个问题:

JS 中的模块化指的是 代码和逻辑分割 的一种方式。通常,我们可以简单的把一个js文件理解为一个模块。

最初的 JS 中并不支持模块化,因此延伸出来很多社区模块化方案,比如:AMD、UMD,但是目前除了 UMD 之外,其他都已经很少见了。

现在,常用的模块化主要有两种:CJS(Node 端)、ESM(浏览器端)。

随着前端项目越来越复杂,又延伸出来模块打包器的概念。特别是在一些框架的使用中,这是非常有用的。

© 版权声明
THE END
喜欢就支持一下吧
点赞10赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容