Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是?   很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器都能理解的代码,这就是Babel的作用.2. Babel是如何工作的?   Babel的编译过程和大多数其他语言的编译器大致相同,可以分为三个阶段. 1. 解析(PARSE):将代码字符串解析成抽象语法树. 2. 转换(TRANSFORM):对抽象语法树进行转换操作. 3. 生成(GENERATE):…

首先AST是什么? 在计算机科学中,抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码. 我们可以理解为:把 template(模板)解析成一个对象,该对象是包含这个模板所以信息的一种数据,而这种数据浏览器是不支持的,为Vue后面的处理template提供基础数据. 这里我模拟Vue去实现把template解析成ast,代码已经分享到 https://github.com/z…

1.tokens "int"                   "int" <SPACES>                " " <IDENTIFIER>            "global_a" <SPACES>                " " "="                     "=" <SPACE…

这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发中使用了一个大而全的java框架,框架集成了前后端,前端在这个框架的基础上开发jsp页面,并未做到前后端完全分离.现在我们有些js代码使用了ES6的语法,但后来遇到了IE兼容性的问题,又不得不把代码转换到ES5,ES6的模板字符串是多么好用呀.唉~ > ### 自己尝试过哪些方法> 目前简单配置了…

js混淆加密,通过混淆Js代码让别人(很难)无法还原   使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密,或者混淆js来达到代码保护. 1.为什么需要js混淆 在web系统发展早期,js在web系统中承担的职责并不多,只是简单的提交表单,js文件非常简单,也不需要任何的保护. 随着js文件体积的增大,为了缩小js体积,加快http传输速度,开始出现了很多对js的压缩工具,比如 uglify.compr…

我在团队帮助开发 Node 工具时,遇到了需要对多份相似的代码进行一定的处理,但又不能改变原本仓库的代码,这个非常像我们的编译工具做的事情.在一开始的时候,参考了类似 FIS 的功能,简单参照使用代码的 HOOK 配合正则来进行代码的操作.后面觉得实在难以拓展且无法确保修正后的代码可用性,还是觉得必须使用 Babel 来实现源码的操作. 什么是 Babel babel 可以说是前端工程化用的最多的工具之一.在 ES6 仅仅只有标准时,我们就开始利用 Babel 的 ES6 转换到 ES5 的功能…

代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一波开源治理,而其中代码规范就占据了很重要的一项.接下来的几篇文章,将会对JS代码规范.CSS规范.Git工作流规范以及文档规范进行详细的介绍~ 系列文章: 前端规范之JS代码规范(ESLint + Prettier) 前端规范之CSS规范(Stylelint) 前端规范之Gti工作流规范(Husky…

想要学习 “原型链” 必须要认识什么是 “原型” 和 “原型链” 先理解一下普通的继承和原型的区别,下面写一段js代码来帮助理解: var Animal = function(){ // 动物抽象类 this.name; this.age; this.sex; this.skill = function(){}; this.die = function(){}; }; var Dog = function(){};var Cat = function(){}; Dog = new Animal(…

前言 本文来总结下webpack中 css.js.html 代码常见的处理方式,学习笔记仅供参考. 正文 1.css样式文件处理 (1)提取css为一个单独的文件 在我们前面学习了webpack的基础上,我们知道webpack在打包之后把css样式文件放在了js中,这样导致文件比较混乱,我们这一步需要将css样式文件打包成一个单独的文件,即从js中抽取出来. 首先需要一个基本的weback环境,然后安装MiniCssExtractPlugin这个插件,命令如下: npm i mini-css-e…

早期(编译期)优化 一.Javac编译器 1.Javac的源代码与调试 Javac的源代码放在JDK_SRC_HOME/langtools/src/shares/classes/com/sun/tools/javac中,除了JDK自身的API之外,就只引用了JDK_SRC_HOME/langtools/src/shares/classes/com/sun/*里面的代码,调试环境建立起来简单方便,因为基本上不需要处理依赖关系. 编译过程大致可以分成3个过程: (1)解析与填充符号表过程 (2)插入…