前端工程化面试题

说一下模块化方案

模块化是为了解决代码的复用和组织问题,可以说有了模块化才让前端有了工程的概念,模块化要解决两大问题 代码隔离和依赖管理,从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下的依赖,解决幽灵依赖问题
相关推荐
じòぴé南冸じょうげん2 小时前
若依框架favicon.ico缓存更新问题解决方案:本地生效但线上未更新
前端·javascript·前端框架·html
狮子座的男孩2 小时前
js基础高级:01、数据类型(typeof、instanceof、===的使用)、数据与变量与内存(定义、赋值与内存关系、引用变量赋值、js调函数传参)
前端·javascript·经验分享·数据类型·数据与变量与内存·赋值与内存关系·引用变量赋值
Cyclo-5 小时前
PDFJS 在React中的引入 使用组件打开文件流PDF
前端·react.js·pdf
椒盐螺丝钉7 小时前
Vue Router应用:组件跳转
前端·javascript·vue.js
顾安r7 小时前
11.20 开源APP
服务器·前端·javascript·python·css3
敲敲了个代码8 小时前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·javascript·css·学习·面试
少云清8 小时前
【软件测试】5_基础知识 _CSS
前端·css·tensorflow
倔强青铜三9 小时前
AI编程革命:React + shadcn/ui 将终结前端框架之战
前端·人工智能·ai编程
天外飞雨道沧桑9 小时前
前端开发 Cursor MCP 提效工具配置
前端·vscode·ai编程·开发工具·cursor
朱哈哈O_o9 小时前
前端通用包的作用——jquery篇
前端