前端工程化面试题

说一下模块化方案

模块化是为了解决代码的复用和组织问题，可以说有了模块化才让前端有了工程的概念，模块化要解决两大问题 代码隔离和依赖管理，从node.js最早发布的commonjs 到浏览器端的 AMD,CMD 规范以及兼容的 UMD 规范，再到现在主流的ES Module规范。

• AMD CMD 都是为了解决浏览器端的模块化问题，区别就是代码执行时机不同，CMD是懒执行。
• UMD就是兼容CommonJS ，AMD 以及全局变量来加载模块。
• ESM是在语言标准的层面上实现了模块功能，Node.js也支持（13版本后，.mjs 或者声明type:module），

CJS和ESM的区别：

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
• ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块的输出module.exports
• CommonJS 模块的require()是同步加载模块，动态import是异步加载，有一个独立的模块依赖的解析阶段。

CJS和ESM的原理可以再研究

ESM生态在逐渐发展，随着 vite等工具的流行，no-bundle概念也在逐渐推广，CommonJS的历史包袱还需要一定的时机去转化。

介绍一下vite 相比webpack的优缺点

• vite把自己定义为工具链，很多可以开箱即用，配置简单，生态也再不断完善，ESM，bundle-less也是大势所趋。
• 基于ESM和ESBuild 的Dev Server，冷启动速度快，按需编译
• webpack 兼容性好，生态完善

说一下Rollup

rollup是一款打包构建工具，通常用来构建一些库，比如Vue等都是用rollup构建的。是基于ESM的打包器，支持tree-shaking，scope hoisting等特性。

可以输出多种模块规范的代码，也有丰富的插件。Rollup 插件基本就是各种 Hook 函数的组合。

AST和Babel

• 抽象语法树：对代码的一种抽象表示，是树形结构。
• 应用：代码高亮，JS转义，代码压缩，ESLint，Prettier等
• babel 编译 ES5 的过程：parse（解析代码生成AST）、transform（通过 traverse 遍历 AST 进行处理转换）、generator (生成代码)

包管理工具

• pnpm
  • 解决问题：幽灵依赖和分身依赖（相同依赖不同版本）
  • 硬链接： 保证相同的包不会被重新新增，磁盘的目录下，相当于备份
  • 软连接：node_modules 里的软链接到对应的.pnpm下的依赖，解决幽灵依赖问题