ES6引入前需要解决的问题

verano 发布于2019-08-22 10:58 / 2500人阅读

摘要：的新特性哪些适合使用我们参考使用进行开发的思考文章推荐的新特性，仅使用三星的。另外推荐阅读探秘系列的新特性是否通过转换后还有兼容问题团队中又同学正在验证，我们验证的环境是，我们最终会使用三星特性加上兼容性的。

最近项目中的一个模块正式引入的ES6，由于是引入新技术，也遇到了一些问题，下面分享下整个引入流程

为什么要引入ES6

最近在看一些前端解决方案的文章，ES6越来越多的出现在前端方案中。

ES6由于浏览器不支持，在使用上也是和CoffeeScript和TypeScript一样，都需要compile-to-JS。

理由一：
符合未来趋势，angular2就是使用TypeScript实现；
react native 也是可以直接使用es6的语法；

理由二：
提高开发效率（待考证）；

理由三：
减少代码量、提高可读性等

但我觉得不仅仅如此，应该会有更多优势。所以需要亲自验证。

引入前考虑最多的事情

从个人的角度，趋势这个东西说不准，减少代码量、提高可读性等这些其实都可以通过规范来完成。

我个人最看重的是效率这块，是否能够真正的提高团队开发效率。

另外在一片文章中看到说facebook.com 都使用了ES6 + babel complile，我心里也安稳了一些。

考虑的第二点就是是否会给整个系统引入技术债务，由于这个是新技术的引入，和之前框架没有任何重叠，而且引入也是选择性的（提供一种可用的环境）。如果未来有较大的升级，我们可以修改compile-to-JS做适配和转换。

最后一个问题是我们项目使用的不是grunt这种，有直接的解决方案，引入可能会有风险。不过庆幸的是，我们发现我们使用的edp已经支持了。其实我们开始已经想好了如果不支持，自己会扩展一些插件去支持。

技术方案

ES6 + babel

需要解决的问题

开发环境下的浏览器不支持ES6？

使用babel转换的代码，调试不方便？

线上环境的代码打包编译怎么处理？

ES6的新特性哪些适合使用？

ES6的新特性是否通过babel转换后还有兼容问题？

开发效率是否会有提高？

编译器高亮支持？

下面挨个解决问题

想到一句话

你可以坐以待毙，也可以立刻动手解决问题，解决一个再解决一个，解决了所有问题，你就活下来可以回家了

来自《火星救援》

开发环境下的浏览器不支持ES6？
这个容易，使用babel。

使用babel转换的代码，调试不方便？
确定了sourceMap的方式解决，但是开始没有认真看babel文档，绕了个圈子，最后发现babel有个属性

sourceMaps：both
filename： pathname.replace(/.(w+)$/, ".raw.$1")

传入这个参数sourceMaps传入表示启用；
filename是编译前对应的文件,这里必须给一个和处理的文件名不一样的

babel.transform(code, options)

线上环境的代码打包编译怎么处理？
在构建的流程中，加入一个babel-processor的流程即可，加入的时机需要是在模块压缩合并前，其实就是越早越好。

ES6的新特性哪些适合使用？
我们参考
使用ES6进行开发的思考

arrows    ★★★  
classes    ★★★  
enhanced object literals    ★★★  
template strings    ★★★  
destructuring    ★★  
default + rest + spread    ★★★  
let + const    ★★★  
iterators + for..of    ★★  
generators    ★  
unicode    ☆  
modules    ★★  
module loaders    ☆  
map + set + weakmap + weakset    ★★  
proxies    ☆  
symbols    ★  
subclassable built-ins    ☆  
promises    ★★★  
math + number + string + array + object APIs   ★★★  
binary and octal literals    ★  
reflect api    ☆  
tail calls    ★★

文章推荐的新特性，仅使用三星的。

另外推荐阅读探秘ES6 系列

ES6的新特性是否通过babel转换后还有兼容问题？
团队中又同学正在验证，我们验证的环境是IE9+,ff,chrome，我们最终会使用三星特性加上兼容性ok的。

开发效率是否会有提高？
后面会通过做一个小的新需求，或者重构一个小模块去验证。

编译器高亮支持？
sublime Text 下面
https://github.com/babel/babel-sublime
或者
https://github.com/voronianski/oceanic-next-color-scheme

其实问题就这么多，比想象中简单许多，未来可能还有坑，但是至少我们开始尝试了。

红利

语法有问题时，编译报错——语法检查

面向未来——未来很多源码都是预编译类型

开阔前端思路

能读懂以后牛逼框架的源码， angular2 使用typescript

微信公众号

博客地址

http://tangguangyao.github.io/

混合云专线服务解决问题的方法云计算解决的问题短视频问题的解决措施数据分析解决的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91563.html

ES6解决了什么问题

摘要：异步编程前异步编程的解决方式回调函数事件监听发布订阅自定义提供了原生的对象，统一了用法和标准。如果不设置回调函数，或在中再次抛出错误。函数内部语句返回的值，会成为方法回调函数的参数。 ECMAScript 6.0于2015 年 6 月正式发布了，成为JavaScript 语言的下一代标准。ES6增加的语言特性解决了哪些问题，会给开发者哪些便利，是本文主要探讨的问题。增加了对unico...

zzzmh 2019-08-22 15:15 评论0 收藏0
JS常见模块化规范(CommonJS/AMD/CMD/UMD/ES6 Module)

摘要：常见模块化方案是由社区提出的模块化方案中的一种，遵循了这套方案。是模块化规范中的一种，遵循了这套规范。中的模块化能力由两个命令构成和，命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。为什么需要模块化在ES6出现之前，JS语言本身并没有提供模块化能力，这为开发带来了一些问题，其中最重要的两个问题应当是全局污染和依赖管理混乱。 // file a.js var name =...

walterrwu 2019-08-23 12:32 评论0 收藏0
ES6-class、模块化在vue中应用(10)

摘要：我们在之前文章与面向对象编程中，说到了目前大部分框架和库，都采用了面向对象方式编程。那么具体是怎么样应用的呢面向对象编程，最典型和最基础的作用就是封装，封装的好处就是代码的能够复用，模块化，进行项目和文件的组织。模块化在中的应用。我们在之前文章《ES6 class与面向对象编程》中，说到了目前大部分框架和库，都采用了面向对象方式编程。那么具体是怎么样应用的呢？面向对象编程，最典型和最...

endiat 2019-08-26 13:45 评论0 收藏0
javascript中为什么我们不能直接使用export?

摘要：我们可以认为，宏任务中还有微任务这里不再多做解释可能会执行的代码包括脚本模块和函数体。声明声明永远作用于脚本模块和函数体这个级别，在预处理阶段，不关心赋值的部分，只管在当前作用域声明这个变量。相信很多人最开始时都有过这样的疑问假如我的项目目录下有一个 index.html, index.js 于是我像这样写在浏览器之间打开index.html，发现showImg(https://...

URLOS 2019-08-26 14:04 评论0 收藏0
Javascript模块全揽

摘要：要求模块编写必须在真正的代码之外套上一层规定的代码包装，样子看起来是这样的模块代码通过传递一个签名为的回调函数给函数，就可以把需要注入的变量和函数注入到模块代码内。之前写的文章急速Js全栈教程得到了不错的阅读量，霸屏掘金头条3天，点赞过千，阅读近万，甚至还有人在评论区打广告，可见也是一个小小的生态了；）。看来和JS全栈有关的内容，还是有人颇有兴趣的。 showImg(https://...

lily_wang 2019-08-23 11:41 评论0 收藏0