Babel + @babel/preset-env 在 Webpack 中的配置实践Babel 是 JavaScript 转换平台。@babel/preset-env 根据目标环境智能启用必要插件，完成语法降级与 polyfill 注入。babel-loader 是 Webpack 与 Babel 的桥梁。 本文覆盖职责、核心 API、配置方式、多场景组合、加速替代方案及常见坑点。 一、核心职责 组件 职责 Babel 解析 JS → AST → 插件转换 → 输出兼容代码 @babel/preset-env 根据 targets / browserslist 只启用必要语法转换 + polyfill babel-loader 在 Webpack 打包链路中调用 Babel core-js 提供运行时 API polyfill（Promise、Array.includes 等） 语法转换解决「能不能解析」，polyfill 解决「运行时有没有这个 API」。 二、安装123456yarn add -D @babel/core @b ...
PostCSS 与 postcss-preset-env 在 Webpack 中的配置实践在现代前端工程中，CSS 兼容性处理是绕不开的一环。PostCSS 作为 CSS 处理平台，配合 postcss-preset-env 可以自动降级新语法、补全厂商前缀，而 postcss-loader 则是连接 Webpack 与 PostCSS 的桥梁。本文系统梳理三者的职责、核心 API，以及四种常见配置方式的取舍，帮助你在不同项目规模下做出合适选择。 一、核心组件职责1. PostCSSPostCSS 本身不做任何转换。它只负责把 CSS 解析成 AST（抽象语法树），再交给插件链依次处理，最后把处理后的 AST 重新序列化为 CSS。 可以把它类比为 Babel：Babel 是 JS 的转换平台，PostCSS 是 CSS 的转换平台。真正的能力来自插件。 2. postcss-preset-env官方维护的插件包（Plugin Pack），内部集成了： Autoprefixer：根据目标浏览器自动添加厂商前缀 一批基于 cssdb 的新语法降级插件（如自定义属性、嵌套、逻辑属性、颜色 ...
一. 问题 问题：你的简历好像没更新，想了解你刚刚提到的在 实习 主要做了哪些事情。追问/关注点： 面试官想确认你最近实习经历的真实工作内容、个人贡献和技术产出。回答情况： 你回答了上个月在内部做 OA 老系统重构，因为原系统比较古老，导师希望你尝试重构。你使用类似 Vite 的构建工具替代旧工具，原本构建或启动需要 40 多秒，重构后大概不到 10 秒，并且不再依赖已停止维护的第三方工具，可以本地开发。你还提到参与了 YY 的一些中后台项目。评价： 有具体项目背景和性能提升数据，是有效回答。但表达比较散，还可以补充你负责哪些模块、遇到什么难点、如何落地、最终收益是什么。 问题：浏览器里输入一个网址，比如头条.com，或者发起一个 API 请求，到前端代码拿到接口响应，中间发生了哪些事情？追问/关注点： 考察浏览器输入 URL 到页面/接口响应的完整网络链路。回答情况： 你提到浏览器会补全协议，检查本地缓存和 DNS 缓存，如果没有则进行 DNS 解析，拿到远程服务器 IPv4 地址，再向后端发起请求。你还提到可能涉及跨域问题。评价： 回答覆盖了 DNS ...
第一题 - 病毒杀灭题意：初始1个病毒，第i天增加i²个。武器能杀k个。求不超过k的最大累积病毒数。 思路：模拟累加平方数，直到超过k。 代码： 123456789101112131415161718192021222324252627#include <iostream>using namespace std;int main(){ int t; cin >> t; while (t--) { long long k; cin >> k; long long ans = 0; long long i = 1; while (ans + i * i < k) { ans += i * i; i++; } cout << ans << endl; } return 0;} ...
简易代码实现Vue的响应式原理1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889let activeReactiveFn = null;const targetMap = new WeakMap();class Depend { constructor() { this.reactiveFns = new Set(); // 使用 Set 来存储依赖函数，避免重复添加依赖函数 } addDepend() { // 避免添加空的函数 if (activeReactiveFn) { this.reactiveFns.add(activeReactiveFn); } } notify() ...
一. 场景在使用 nvm 管理 Node.js 版本时，遇到一些比较老的项目需要安装低版本的 Node.js 时系统常常会出现报错，导致不能正常安装 二. 原因分析 版本特异性：主要影响Node.js 12.x、13.x、14.x等较低版本 系统特异性：主要在Windows系统上出现 npm相关：错误通常发生在下载或安装npm阶段 临时文件问题：错误信息指向临时文件路径 根本原因是nvm版本与Node.js版本的兼容性问题： nvm版本过高：较新版本的nvm-windows（如1.2.2）与老版本Node.js的npm下载机制不兼容 下载链接变更：npm的下载链接在不同时期有所变化，新版nvm可能无法正确处理老版本的下载链接 临时文件处理：新版nvm在处理临时文件时的逻辑与老版本Node.js不匹配 版本兼容表： nvm版本 支持的Node.js版本范围 推荐使用场景 1.1.12 8.x - 18.x 需要老版本Node.js 1.2.x 16.x - 最新 只使用新版本Node.js 问题发生的技术流程 nvm下载Node.js二进制文件 ✓ (成功) ...
JavaScript
未读apply代码模拟实现123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354/** * cm_apply * 通过js手动实现apply函数 * 1. 给所有函数添加cm_apply方法 ===> 在函数原型上添加临时方法 * 2. 先通过this获取需要执行的这个函数 * 2.1. 判断this是否是函数 * 2.2. 判断是否是undefined与null，直接返回window * 2.3. 判断是否是数字，字符串等原始值，直接使用Object()函数转化为可挂载的对象 * 2.4. 对象即可直接使用 * 3. 使用Symbol()作为key来挂载这个函数 * 4. 处理第二个参数的正确性与规范性 * 4.1. 判断是否传数据 * 4.2. 判断是否为数组，否则报错 * 5. 传入参数并调用挂载的这个函数 * 6. 收集调用结果 * 7. delete 挂载在这个对象上的临时函数 * 8. return这个收集 ...
已经拿到百度实习offer，已拒二面。 如果这个部分需要保证唯一性，通常要分层处理： 最终保证放在数据层，比如数据库唯一索引、唯一键约束。 接口层补幂等控制，比如用业务唯一标识、去重表或幂等 token，防止重复提交。 前端层只做辅助去重，比如按钮防重复点击、列表按唯一 id 去重，不能作为最终保障。 如果是复杂对象去重，先按业务主键映射，再做去重，而不是直接比较对象引用。
请你做一个简单的自我介绍； 在你过往的项目经历中，有没有遇到过什么困难？请具体举例说明； 针对这些困难，你是如何解决的？你的处理思路和方法是什么？ 为什么你想往前端开发这个方向发展？你的动机是什么？ 你对我们这个岗位的工作内容是否了解？了解程度如何？ 你是否可以接受该岗位的工作内容？是否符合你的职业规划？ 你目前最快什么时候可以到岗？ 你现在是否有其他正在进行中的面试流程？大概进展如何？ 你目前是否已经拿到其他 offer？ 如果有多个选择，你对我们公司的意向度如何？优先级是怎样的？ 公司当前的上班时间（9:30–12:00 中午午休 14:00-18:30）你是否可以接受？ 公司考勤方式（OA打卡、每月补登机制）你是否可以接受？ 薪资发放周期（每月发放上月工资）你是否可以接受？ 公司没有餐补和房补，这一点你是否可以接受？ 通勤距离和交通情况你是否可以接受？ 如果面试通过，你希望什么时候入职？是否可以配合公司时间安排？ 对于offer发放流程和时间周期，你是否有疑问？ 你目前还有没有其他想了解或需要反问的问题？
