当前位置：首页 > 科技 > 软件

常见，但是总回答不好的面试题：JS 模块化以及模块打包器

来源：责编：时间：2024-05-16 09:09:31 83观看

导读Hello，大家好，我是 Sunday。如今的前端已经是一套非常复杂的体系了，甚至延伸出来了所谓“微前端”的概念。而支撑这些复杂逻辑的前提就是模块化的概念。但是，我在和很多的同学沟通（做技术摸底）的过程中，却发现：很多同学并不

Hello，大家好，我是 Sunday。

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

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

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

所以说，今天咱们就借助这边文章，来说一说：模块化以及模块打包器！

什么是模块？

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

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

图片

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

通常情况下：每一个 JS 文件都将是一个模块！所以，我们可以简单的把一个模块理解为一个 js 文件（注意：这只是简单的理解）

JS 的模块化体系

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

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

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

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

CommonJS：主要应用在 Node 端。以 module.exports 导出，以 require 导入。

module.exports = {  name: '张三'}-----const {name} = require('路径')

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

图片

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

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

答案

那么最后，让我们回答这个问题：

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

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

现在，常用的模块化主要有两种：CJS（Node 端）、ESM（浏览器端）。

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

本文链接：http://www.28at.com/showinfo-26-88378-0.html常见，但是总回答不好的面试题：JS 模块化以及模块打包器

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：万丈高楼平地起，一切从 PyObject 开始

下一篇： React 源码中最重要的部分，你知道有哪些吗？

标签：

热门焦点

6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

2023年上半年已经正式过去了，我们也迎来了安兔兔V10版本，在新的骁龙8Gen3和天玑9300发布之前，性能榜的榜单大体会以骁龙8Gen2和天玑9200+为主，至于那颗3.36GHz的骁龙8Gen2领先
十个可以手动编写的 JavaScript 数组 API

JavaScript 中有很多API，使用得当，会很方便，省力不少。你知道它的原理吗? 今天这篇文章，我们将对它们进行一次小总结。现在开始吧。1.forEach()forEach()用于遍历数组接收一参
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
2023年，我眼中的字节跳动

此时此刻（2023年7月），字节跳动从未上市，也从未公布过任何官方的上市计划；但是这并不妨碍它成为中国最受关注的互联网公司之一。从2016-17年的抖音强势崛起，到2018年的“头腾
Temu起诉SHEIN，跨境电商战事升级

来源 | 伯虎财经（bohuFN）作者 | 陈平安日前据外媒报道，拼多多旗下跨境电商平台Temu正对竞争对手SHEIN提起新诉讼，诉状称Shein“利用市场支配力量强迫服装厂商与之签订独家
当家的盒马，加速谋生

来源 | 价值星球Planet作者 | 归去来自己“当家”的盒马，开始加速谋生了。据盒马官微消息，盒马计划今年开放生鲜供应链，将其生鲜商品送往食堂。目前，盒马在上海已经与
8月见！小米MIX Fold 3获得3C认证：支持67W快充

这段时间以来，包括三星、一加、荣耀等等有不少品牌旗下的最新折叠屏旗舰都得到了不少爆料，而小米新一代折叠屏旗舰——小米MIX Fold 3此前也屡屡被传
三星电子Q2营收60万亿韩元存储业务营收同比仍下滑超过50%

7月27日消息，据外媒报道，从三星电子所发布的财报来看，他们主要利润来源的存储芯片业务在今年二季度仍不乐观，营收同比仍在大幅下滑，所在的设备解决方案