浏览器兼容性 和 Transpilation

你的 web 浏览器可能每隔几个月就会提示你去更新,你知道为什么吗,主要是一些安全漏洞,新特性,以及支持新的 HTML、CSS 和 JavaScript 语法。

也就是说,在一个浏览器发布新版之前会有一段时间,存在安全漏洞和不支持的新语法。

这已经是 Web 开发人员普遍关注的一个问题,2015 年,标准化组织发布了 ECMAScript2015,通常被称为 ES6,上一个版本是 ES5。

发布之后,开发者们都很快采用了新的语法,因为它可以提高开发效率和可读性。但是当时大多数浏览器都不支持 ES6,所以就存在这种兼容性问题。

两个解决浏览器兼容问题的重要工具:

caniuse.com——提供最新的各种 PC 和 移动设备浏览器对前端 web 技术的支持情况

Bable—是一个 JavaScript 库,可以用它将 ES6 转成 ES5,从而运行在大部分浏览器上

因为浏览器对 ES6 的新特性是逐渐添加进去的,所以需要自己去查找这些浏览器的兼容情况。

Why ES6? 为什么用 ES6?

和其他语言更相似的语法——语义上更接近其它面向对象编程对象,当有经验的非 JavaScript 开发者想学习 JavaScript 时会更容易。

可读性和经济性——新语法更容易理解,实现同样的功能需要更少的代码

解决了一些 ES5 的 bug——ES5 的一些语法导致的常见的bug,ES6 的新语法可以减少一些常见的错误

所以 Web 开发者很快开始使用 ES6,但浏览器的支持却是滞后的。

因此 ES6 的新语法是向后兼容的,你可以将 ES6 代码映射成 ES5 版本的。

使用 Babel 进行 Transpilation

Transpilation 就是把一种语言的代码转换成另一种语言的过程。

npm init // 根目录创建 package.json
npm install babel-cli -D // -D表示将 package 添加到 package.json 中的 devDependencies 属性中
npm install babel-preset-env -D
npm run build

.babelrc

通过根目录创建一个 .babelrc 文件,你就可以指定源 JavaScript 的版本

touch .babelrc

在文件中添加下面这个对象,["env"] 表示要从 ES6+ 的版本转换代码

{
"presets": ["env"]
}

Babel Source Lib

在运行 npm run build 之前,还需要一个操作——在 package.json 中的 scripts 属性中,有一个 test 属性,在 test 属性下面,添加一个 build 属性,如下:

...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
}

"babel src -d lid" 命令行参数

babel——Babel 命令

src——指示转换 src 目录中的所有 JavaScript 代码

-d——表示将转换后的代码写入一个目录下

lib——转换后的代码存放路径

Review 小结

ES5——所有现代浏览器都支持的旧的 JavaScript 版本

ES6——JavaScript 新版本

caniuse.com——可以查看浏览器兼容情况的网站

Babel——能将 ES6+ 版本的代码转译为 ES5

npm init——创建 package.json 文件

package.json——包含 JavaScript 项目信息的文件

npm install——安装项目依赖的 Node 包

babel-cli——包含Babel 命令行工具的 Node 包

babel-preset-env——包含 ES6+ 到 ES5 的语法映射信息的 Node 包

.babelrc——指定 JavaScript 源代码的版本

ES6 浏览器兼容性 和 Transpilation的更多相关文章

  1. 浏览器兼容性-JS篇

    总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...

  2. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  4. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

  5. 浏览器兼容性小整理和一些js小问题(后面会继续更新)

    最近在啃jQuery的源码,估计会啃到很多浏览器兼容性的问题,所以整理一下 1,IE下的内存泄露. 在IE中不在DOM树中的独立节点有javascript变量引用它的时候不会被回收. 解决:手动将该j ...

  6. css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]

    css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...

  7. 【转】CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  8. 测试 IE 浏览器兼容性 VirtualBox + modern.ie

    VirtualBox 是开源的虚拟机软件,常用的虚拟机软件还有 VMware / Hyper-V / Paralles Desktop . modern.ie 是微软官方提供的用于测试网页在各版本 I ...

  9. javascript中new Date浏览器兼容性处理

    看下面的代码 <script type="text/javascript"> var dt1 = new Date('2016-3-4 11:06:12'); aler ...

随机推荐

  1. css3写出飘雪花特效

    大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...

  2. CF1153D Serval and Rooted Tree

    题目地址:CF1153D Serval and Rooted Tree 挺好玩儿也挺考思维的一道题 思路:树形DP+贪心 数组 \(d\) 维护这样一个值: 对于一个节点 \(x\) ,它的值最大可以 ...

  3. Maven - <Profile>详解

    转载自:https://www.cnblogs.com/wxgblogs/p/6696229.html Profile能让你为一个特殊的环境自定义一个特殊的构建:profile使得不同环境间构建的可移 ...

  4. flutter 登录后跳转到根路由

    flutter 登录以后  会有返回箭头显示 因为  路由的切换导致不是路由的第一个页面,解决办法清空路由. Navigator.of(context).pushAndRemoveUntil( new ...

  5. linux文件删除原理

    文件删除的原理 linux的文件名是存在父目录的block里面的,并指向这个文件的inode节点,这个文件的inode节点在标记指向存放这个文件的block的数据块.我们删除文件,实际上不是清除ino ...

  6. java 常用工具类

    1. org.apache.commons.collections4包提供CollectionUtils.MapUtils.ListUtils.SetUtils等工具类: 2. org.apache. ...

  7. php配置文件参数设置

    pm.max_children 设置多大合适? 一.pm.max_children 多大合适? 这个值原则上是越大越好,php-cgi的进程多了就会处理的很快,排队的请求就会很少. 设置”max_ch ...

  8. Windows Internals 笔记——线程调度

    1.线程内核对象中的CONTEXT反应了线程上一次执行时CPU寄存器的状态.大约每隔20ms,Windows都会查看所有当前存在的线程内核对象.Windows在可调度的线程内核对象中选择一个,并将上次 ...

  9. tomcat配置文件及性能优化

    收藏两个地址 配置文件: https://www.cnblogs.com/sunshine-1/p/8990044.html 性能调优: https://www.cnblogs.com/zhuawan ...

  10. L1-049 天梯赛座位分配​​​​​​​

    L1-049 天梯赛座位分配 (20 分) 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i ...