全部学科

Python全栈

NodeJS全栈

通用技术

redis git docker nginx mysql zookeeper rabbitmq

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Web前端

TypeScript vue CSS HTML javascript npm pinia vite

GO后端

golang gorm gin

📝 1 篇文章 20 道配套习题

JS模块化与工程化基础

专题说明

本专题面向前端进阶开发者，系统讲解JavaScript模块化与工程化核心知识，从Webpack打包原理、npm/yarn包管理到CommonJS与ES Module规范对比、Babel转译与ESLint代码检查，帮助开发者掌握现代前端工程化必备技能。

学习目标

理解Webpack核心概念：entry、output、loader、plugin的配置与作用
掌握Tree Shaking原理及其与ES Module的关系
学会npm/yarn包管理：依赖版本管理、锁文件、npx命令、workspaces
深入理解CommonJS与ES Module的区别与互操作
掌握Babel编译流程、preset配置与polyfill策略
了解ESLint配置层级、extends与rules的关系

学习内容

本专题涵盖以下知识点：

Webpack打包：核心配置、Dev Server、Tree Shaking、Bundle Analyzer、Module Federation
包管理工具：语义化版本、锁文件、npm scripts、npx、workspaces
模块化规范：CommonJS与ES Module对比、动态import、循环依赖处理
工程化工具：Babel编译流程、preset-env、polyfill策略、ESLint配置

学习建议

Webpack是前端工程化的核心，理解loader与plugin的区别至关重要
Tree Shaking依赖ES Module静态结构，理解这一原理有助于优化打包体积
npm/yarn锁文件确保依赖版本一致性，是团队协作的重要保障
CommonJS与ES Module各有优劣，理解两者区别有助于正确选择模块规范
Babel只转换语法，polyfill需要单独配置，这是容易混淆的点
ESLint配置优先级很重要，extends和rules的关系需要牢记

📝 配套习题（20 题）

💡 参考答案在文末

判断题

1

yarn最初发布时的主要优势之一是支持并行安装包，而npm 5之前的版本是串行安装包的，npm 5及以后版本也支持并行安装了。

A

对

B

错

2

Babel默认只转换语法，不转换新的API（如Promise、Array.prototype.includes等），需要配合core-js等polyfill库来提供这些API的支持。

A

对

B

错

3

Babel 7版本采用了作用域包（scoped packages）的命名方式，所有官方包都以@babel/为前缀，如@babel/core、@babel/preset-env等。

A

对

B

错

4

Webpack 5版本中，可以通过配置cache.type为filesystem来启用文件系统缓存，从而加速构建过程。

A

对

B

错

5

Webpack开箱即用，可以直接处理JavaScript、CSS、图片等所有类型的文件，无需额外配置loader。

A

对

B

错

单选题

6

关于@babel/preset-env的作用，以下说法正确的是？

A

它可以自动根据目标浏览器环境确定需要的Babel插件

B

它只能转换ES6语法，不能转换更新的语法特性

C

它自动包含所有可能的Babel转换插件

D

它只能用于转换ES Module为CommonJS

7

关于Webpack的Tree Shaking（摇树优化），以下说法正确的是？

A

Tree Shaking可以自动移除所有未使用的代码

B

Tree Shaking依赖于ES Module的静态结构特性

C

使用CommonJS模块规范也能获得完美的Tree Shaking效果

D

Tree Shaking只需要在配置中设置mode为production即可，无需其他配置

8

以下关于npm和yarn的锁文件，说法正确的是？

A

npm使用yarn.lock作为锁文件

B

yarn使用package-lock.json作为锁文件

C

npm使用package-lock.json，yarn使用yarn.lock

D

两者都使用package-lock.json作为锁文件

9

关于npx命令的作用，以下说法正确的是？

A

npx只能执行已全局安装的npm包

B

npx执行包时，如果本地未安装会自动下载到临时目录执行

C

npx和npm run的作用完全相同

D

npx执行完毕后会保留下载的包到node_modules

10

Babel的编译过程主要分为哪三个阶段？

A

解析(Parse)、转换(Transform)、生成(Generate)

B

词法分析、语法分析、代码生成

C

预处理、编译、后处理

D

扫描、解析、输出

11

关于Webpack的核心配置，以下说法正确的是？

A

entry配置只能是字符串，不能是对象或数组

B

output.path配置的是打包输出文件的名称

C

loader用于转换非JavaScript文件，plugin用于执行更广泛的任务

D

mode只能设置为development或production两种模式

12

关于ES Module的动态import()语法，以下说法正确的是？

A

import()是同步执行的，会阻塞代码运行直到模块加载完成

B

import()只能在ES Module中使用，不能在CommonJS中使用

C

import()返回一个Promise，解析为模块的命名空间对象

D

import()和静态import的效果完全相同，只是语法不同

13

在package.json中，依赖版本号^2.3.4表示的含义是？

A

必须安装2.3.4这个精确版本

B

可以安装2.3.x系列中的任何版本，但不包括2.4.0

C

可以安装2.x.x系列中的任何版本，但不包括3.0.0

D

可以安装任何大于等于2.3.4的版本

14

关于CommonJS和ES Module的主要区别，以下说法正确的是？

A

CommonJS是静态加载，ES Module是动态加载

B

CommonJS模块输出的是值的拷贝，ES Module输出的是值的引用

C

CommonJS和ES Module都可以在代码运行时动态加载模块

D

CommonJS模块中的this指向模块本身，ES Module中的this指向undefined

15

以下哪种ES Module导入方式可以实现对模块的整体导入？

A

import { foo } from './module'

B

import foo from './module'

C

import * as module from './module'

D

import './module'

16

Webpack的Tree Shaking功能能够有效移除未使用的代码，这主要依赖于哪种模块化规范的特性？

A

CommonJS的动态require函数

B

ES Module的静态import/export结构

C

AMD的define函数

D

UMD的通用模块定义

17

关于Webpack 5的Module Federation（模块联邦）功能，以下说法正确的是？

A

Module Federation只能共享组件，不能共享函数或数据

B

Module Federation要求所有应用使用相同版本的Webpack

C

Module Federation可以实现多个独立构建的应用共享模块，且每个应用可以独立部署

D

Module Federation只适用于同一域名下的应用共享

多选题

18

关于Webpack Dev Server的配置和功能，以下说法正确的有？

A

hot设置为true可以启用模块热替换（HMR）

B

proxy配置可以实现API请求的代理转发

C

historyApiFallback配置用于支持SPA应用的路由回退

D

contentBase配置用于指定静态资源服务的目录

19

关于@babel/plugin-transform-runtime的作用，以下说法正确的有？

A

它可以将Babel的辅助函数提取为单独的模块，避免重复注入

B

它可以创建一个沙盒环境，避免polyfill污染全局对象

C

它可以自动为代码添加polyfill，无需手动引入core-js

D

它主要用于生产环境构建，开发环境不需要

20

关于npm workspaces（工作区）功能，以下说法正确的有？

A

workspaces允许在单个仓库中管理多个npm包

B

workspaces会在根目录的node_modules中为工作区包创建符号链接

C

npm install会同时安装所有工作区包的依赖

D

workspaces需要在package.json的workspaces字段中配置工作区路径

参考答案

1.正确 2.正确 3.正确 4.正确 5.错误 6.A 7.B 8.C 9.B 10.A 11.C 12.C 13.C 14.B 15.C 16.B 17.C 18.A;B;C;D 19.A;B;C 20.A;B;C;D

想在手机上练习这套专题？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码