前端利器躬行记(2)——Babel】的更多相关文章

Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特性的修补:还支持语法扩展,从而能随时随地的使用JSX.TypeScript等语法.目前最新版本是7.4,自从6.0以来,Babel被分解的更加模块化,各种转译功能都以插件的形式分离出来,可按自己的需求,灵活配置. 在7.0版本中,对Babel的包做了一次大调整,统一改成域级包,将原先以“babel-…
webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CSS和HTML等文件,并且能对图像做优化处理,如图1所示. 图1  webpack打包 目前,webpack的最新版本是4.33,其配置文件(webpack.config.js)的基本结构如下所示,包含了它的4个核心概念:入口(entry).输出(output).加载器(loader)和插件(plug…
npm(Node Package Manager)是Node.js的包管理工具,相当于一个在线仓库.它提供了一个公共的平台,将分散在世界各地的包集中起来,能轻松的安装.分享和管理相关的包,不用再为搜索包而烦恼,并且npm能自动处理包的依赖项.它由三部分组成: (1)网站:可用来浏览.搜索包的信息. (2)注册表:一个巨大的数据库,保存了每个包的信息,例如作者.版本.依赖等. (3)命令行界面(CLI):开发者可在CLI中对包进行发布.安装.卸载等操作. 由于新版的Node.js已集成了npm,因…
webpack是一个非常强大的工具,除了前文所介绍的基础概念之外,还有各种进阶应用,例如Source Map.模块热替换.集成等,本文会对这些内容做依次讲解. 一. runtime和manifest 在webpack打包生成的bundle文件中,除了业务代码和引用的第三方库之外,还会包含管理模块交互的runtime和manifest. 1)runtime runtime是一段辅助代码,在模块交互时,能连接它们所需的加载和解析逻辑.下面是通过webpack 4.34生成的runtime(只给出了部…
Git是一款开源的分布式版本控制系统,它的出现和Linux紧密相关.Linux内核项目组为了能更好地管理和维护Linux内核开发,于2002年开始启用商业的分布式版本控制系统BitKeeper.虽然软件开发商授权了Linux社区能免费使用,但是好景不长,到了2005年,BitKeeper的开发商由于某些原因终止了与Linux社区的合作关系.于是Linux的作者Linus Torvalds就决定开发一款能替代BitKeeper的分布式版本控制系统(即Git),在花费十天的时间后发布了Git的第一个…
Fiddler是一款免费的.基于Windows系统的代理服务器软件(即Web调试抓包工具),由Eric Lawrence用C#语言在2003年10月发布了第一个版本.注意,由于Fiddler依赖Microsoft .NET Framework 2.0或更高版本,因此在运行Fiddler之前需要预先将其安装. 当启动Fiddler时,它会自动注册成Windows Internet(WinINET)网络服务代理,从而就能捕获本地所有的HTTP和HTTPS数据流.在图14中,客户端(例如Web浏览器.…
VSCode提供了丰富的 API,可以借助编辑器扩展许多定制功能. 本次研发了一款名为 Search Method 的插件,在此记录整个研发过程. 一.准备工作 1)安装环境 首先是全局安装 yo 和 generator-code 两个库,我本地全局安装了 cnpm,所以用它来安装. npm install yo generator-code -g 然后使用 yo 命令初始化插件项目. yo code 回答些问题,但如果在回答 Initialize a git repository 时选择 ye…
古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查询相关知识概念,并且对很多知识也仅仅是略知一二,没有领会到其中的原理.为此,开辟了<ES6躬行记>系列,将ES6相关的知识系统的记录下来,以便自己翻阅,也希望能帮助到广大网友. 在ES6之前的版本中,用于声明变量的关键字只有var,并且没有块级作用域,只有函数作用域和全局作用域,但在ES6中已改变…
ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向…
这套前端监控系统用到的技术栈是:React+MongoDB+Node.js+Koa2.将性能和错误量化.因为自己平时喜欢吃菠萝,所以就取名叫菠萝系统.其实在很早以前就有这个想法,当时已经实现了前端的参数搜集,只是后台迟迟没有动手,也就拖着. 目前完成的还只是个雏形,仅仅是搜集了错误和相关的性能参数. 后台样式采用了封装过的matrix. 分析功能还很薄弱,只是做了简单的演示,并且各种基础功能还有待完善. 后面打算强化数据分析,并且还要实现错误的回放机制,思路的话以前也调研过,参考之前的一篇文章.…