前端工程化面试题

说一下模块化方案

模块化是为了解决代码的复用和组织问题,可以说有了模块化才让前端有了工程的概念,模块化要解决两大问题 代码隔离和依赖管理,从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下的依赖,解决幽灵依赖问题
相关推荐
遗憾随她而去.29 分钟前
前端浏览器缓存深度解析:从原理到实战
前端
万行1 小时前
企业级前后端认证方式
前端·windows
2501_948120151 小时前
基于Vue 3的可视化大屏系统设计
前端·javascript·vue.js
Jinuss1 小时前
源码分析之React中createFiberRoot方法创建Fiber根节点
前端·javascript·react.js
Jinuss2 小时前
源码分析之React中ReactDOMRoot实现
前端·javascript·react.js
web守墓人2 小时前
【前端】vue3的指令
前端
想起你的日子3 小时前
EFCore之Code First
前端·.netcore
框架图3 小时前
Html语法
前端·html
深耕AI3 小时前
【wordpress系列教程】07 网站迁移与备份
运维·服务器·前端·数据库