babel

码云之上13 天前
性能优化·rollup.js·babel
rollup进阶——为产物添加全局try-catch笔者参与开发的前端性能监控平台使用了OpenTelemetry作为监控日志的标准协议。而在使用过程中发现该协议提供的库中使用了较新的 ES6 特性,在低版本浏览器中不支持,触发了ReferenceError。从而中断了主线程,引发严重的页面白屏问题。
护国神蛙22 天前
前端·javascript·babel
组长说:公司的国际化就交给你了,下个星期给我“小王啊,海外业务要上线了,国际化你搞一下,下个月验收。”组长轻描淡写的一句话,让我盯着祖传代码陷入沉思——
德莱厄斯22 天前
前端·javascript·babel
三行代码完成国际化适配,妙~啊~国际化适配一直以来都是一个棘手的问题,尤其是在项目一开始没有考虑的情况下,我们需要修改大量源码,使用类似于 ${t.xxx} 的占位符去一一修改我们已经写好的文字(如最耳熟能详的vue-i18n)。这个工程量在项目后期是巨大的,令人无法接受的。
字节颤抖1 个月前
前端·uni-app·es6·vue3·vite·babel·兼容
vite+vue3开发uni-app时低版本浏览器不支持es6语法的问题排坑笔记
过云鱼6 个月前
面试·babel·前端工程化
Babel 快速上手Babel 是一个广泛使用的 JavaScript 编译器,它允许开发者编写下一代 JavaScript 代码(如 ES6/ES2015 及更高版本),并将其转换为向后兼容的 JavaScript 代码,以便在各种环境中运行,包括旧版浏览器。
aoi9 个月前
javascript·babel
Babel 示例插件:处理 AST 替换变量、箭头函数Babel 前段时间听闻后感觉神秘,无从下手?非常理解🧐编写一个示例后,你会发现它只是一个将 ES6 代码转换为 ES5 的 JavaScript 工具,使我们能在不支持 ES6 的环境中运行代码。Babel 的工作是先将代码解析为抽象语法树(AST),然后遍历这棵树,对其节点进行操作,最终生成新的代码
文艺理科生1 年前
前端·webpack·babel
Webpack项目构建入门:babel的核心角色最近在梳理webpack打包构建的相关内容,本着一起( 卷 )面对寒冬的心态,把整个思考和分析过程分享出来。各位看官有任何想法都可以在评论区留言,感谢支持~
阿镇吃橙子1 年前
vue.js·vite·babel
由浅入深 ——Vite工具链学习总结在前端的发展过程中,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。我们知道前端构建工具的当下依旧是webpack,那么Vite会是未来吗?
总之就是非常可爱1 年前
前端·babel
提升前端开发效率:利用 Babel 实现 JavaScript 文件的定制化修改因为公司前端架构,在一些情况下需要对vue的路由的meta字段新增或删除很多属性,随着项目规模的扩大,如果手动加配置就会变得很麻烦。 为了简化这一过程,我们需要对路由进行一些自动化的处理,以提高开发效率。本文将介绍一个基于 Babel 的 nodejs 脚本,用于自动化修改 JavaScript 文件。
月下点灯1 年前
前端·javascript·babel
小白也能看懂的AST抽象语法树+babel插件开发教程文本babel插件开发将用到babel-cli脚手架环境,并结合一个AST抽象语法树查询网站AST Explorer,让你开发插件时能够快速定位对应js代码的AST节点, 并通过几个demo让你快速了解如何开发一个babel插件。
let_code1 年前
前端·babel
BabelBabel 可以干什么:首先,webpack 中 loader 的本质就是一个函数,接受我们的源代码作为入参同时返回新的内容。
ichimaru_xx1 年前
node.js·babel
node前端工具实战-svg引入整理工具在之前我们开发了一个node脚手架,实现了node工具项目的快速搭建。现在就来用起这个脚手架来,开发一个小工具来解决一些项目中的问题。
每天写一个BUG1 年前
前端·babel·前端工程化
简单玩一玩 Babel我们知道 babel 实际上一款代码编译工具,也就是可以将源代码由一种形式编译成另外一种形式。 其实 babel 工作的核心原理很简单:sourceCode - AST - targetCode,也就是将源代码转化成抽象语法树(AST),然后再将 AST 转化成目标代码。
yuansucai1 年前
babel
LocatorJS接入入职后发现所在团队的项目内没有接入LocatorJS。这种快速定位页面元素源代码位置的工具对于新人来说用处很大,所以我准备在团队的项目中接入 LocatorJS。
喜欢踢足球的老罗1 年前
前端·react.js·前端框架·babel
一个H5页面中直接使用React的示例与说明如题,下面的个简单代码示例—在H5页面中直接使用React将上面代码copy出来,然后用浏览打开,效果如下
慕仲卿1 年前
babel
Node.js与Webpack中的Babel配置指南在web开发过程中,使用最新的ES6+语法可以显著提高代码的可读性和模块化程度。然而,并不是所有环境都原生支持最新的JavaScript特性,特别是Node.js环境和老旧浏览器。为了解决这一问题,可以借助Babel转译器将ES6+代码转换为向后兼容的JavaScript版本。
昭昭日月明1 年前
babel
前端基建:AST 的基本逻辑对于前端来说,ast 就是用 js 对象的方式去描述一种数据结构。ast 编译在构建工具中有大量应用,例如 es6 转 es5、ts 转 js 等等。 ast 编译的过程简单来说可以分为四步:
狂炫冰美式1 年前
前端·javascript·babel
如何从零实现一个框架编译器?笔者日常使用 Rax 框架开发前端需求。但随着业务扩展,我面临一个头痛的需求:将现有的 Rax 组件适配为 Taro 组件,以实现一些特定商业场景的跨平台功能。
知了清语1 年前
前端·babel
babel: rewrite-import-cli 重写vue-router中的import本文在上一篇内容上进行进一步改造,包装成一个随处可用的 cliwebpack 提供了 require的方式导入模块, 但是我们希望统一改为 import的写法
知了清语1 年前
前端·babel
babel: 转换require为 import 写法我们有很多业务系统,在写 vue2的时候,可能路由是 require 写法,我们想改为 import , 当做技术升级,比如从webpack 迁移到 vite 的时候,会更简单。