什么是babel 官网：javascript编译器。最初从 6to5 库发展而来。 效果： 将es6语法，转换成es5语法。比如将箭头函数，转化成普通函数。 默认只转换语法，不转换API，比如 Iterator、Set、Map、Reflect 过程：解析（parsing）、转换（transforming）和生成（generating） 核心组成 @ba...

表单文件 兼容性最好的文件上传方式，也是各类react ui库中「Upload」组件最常见的底层实现 安全性最好，无法拿到文件在本地磁盘的真实路径 export default function Main() { const onChange = (ev: any) => { const target = ev.target console.log(...

工具终将被更好的工具替代，但是解决问题的思路会永远传承下去。随着前端进入深水区，更加内卷，出现了许多webpack的替代品。在学习和了解这些替代品之前，让我们重温下webpack的一些核心概念。 webpack核心概念是什么？ webpack会将所有的文件理解成「模块module」。这些模块有不同的文件格式，比如js、css、text。 webpack会从entry定义的文件出发，根据...

写法demo const Button = styled.button` color: coral; padding: 0.25rem 1rem; border: solid 2px coral; border-radius: 3px; margin: 0.5rem; font-size: 1rem; `; // 以上写法和下面写法是等效的，上面的写法是JS支持的快...

方案1：纯CSS or Style or ClassName 介绍：最简单的做法，一些工程化方案原理上，都是往style或者className上转换。 优点：兼容性好 缺点：容易互相污染style 方案2：css in js（运行时） 介绍和demo 介绍：在JS中，编写CSS样式，写法上是JS，但是最终还是转换成了CSS。 使用demo： import styled fro...

整体思路 识别 :local 包裹的类名，将其进行hash化，保证不污染全局 将 :local 包裹的类名放在 :export 中，这个是icss的规范，算是css规范的超集。这样就相当于 module.exports ，外面使用时，可以通过 styles.xxx 的方式来拿到hash后的类名。 .guang { color: blue; } ...

本文代码仓库：https://gitee.com/dongyuanxin/learn-vite 认识Vite vite本身是个前端编译工具的聚合器。内部使用了rollup、babel等工具，来达到特定场景下提高构建速度的效果。 构建工具 根据不同的环境，vite会使用不同的底层构建工具： 开发环境： ES Build：基于golang 的 javasc...

双向绑定 Vue.js 就是典型的双向绑定设计。除此之外，新的框架比如 Solid.js 、Preact.js，以及第三方库 ahooks、redux/toolkit、mbox 都采用了双向绑定设计。 特点与好处 无需开发者手动调用 setState 函数来触发底层视图的更新 开发者只需像写JS代码那样，对值进行增删改查即可，由框架来监听value更新，触发视图更新 实现...

几种模块化规范 CommonJS：Nodejs，运行在服务端环境 CMD（Common Module Definition - 通用模块定义）：主要通过 sea.js 流行起来，是国内大佬的作品。 写法模仿CommonJS规范，不过是运行在浏览器环境 AMD（Asynchronous Module Definition - 异步模块定义）：采用异步加...

主要api：useContext和useReducer 用途：都是为了进行状态管理。 一般useContext更常用。 如果使用useReducer不如使用redux或者其他管理库提供的更高级的hook api。 坑点：根据官方文档 Hook API 索引 – React ，也就是用到context的组件，都会由于conte...