JS代码编译—Babel
什么是babel 官网:javascript编译器。最初从 6to5 库发展而来。 效果: 将es6语法,转换成es5语法。比如将箭头函数,转化成普通函数。 默认只转换语法,不转换API,比如 Iterator、Set、Map、Reflect 过程:解析(parsing)、转换(transforming)和生成(generating) 核心组成 @ba...
什么是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...