发布时间： 10:51:29 来源：亿速云 阅读：299 作者：小新 栏目：

这篇文章给大家分享的是有关怎么在NodeJS项目中优雅的使用ES6的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候需要在node后面加上参数：--harmony。但是，即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到Babel了。

在开始使用Babel之前，假设

1.你已经安装了nodejs，并且已经熟悉了Js。

2.你也可以使用npm安装各种依赖包。

3.而且你也对ES6（后来改为ES2015）有一定程度的熟悉。

同时假设你已经安装了yarn，并且也熟悉了yarn。Yarn最大的优点就是它比npm要快很多，因为yarn只把需要的库下载一次，之后用到的时候直接使用本地缓存的版本。npm每次都会下载这些库。这简直就是浪费生命。如果你还没有安装yarn，也没有关系，下面也会有npm的使用方法。

这个时候你就可以使用ES2015的特性了。但是，这还不够，比如我不想用Promise我想用更加方便的async/await语法。只有es2015这个preset是不够的。

这样还是不能在项目中使用es7的async/await了。还需要更多的配置，有两种方法可以达到目的：

2.使用babel运行时转码工具，transform-runtime插件。使用这个方法正好弥补了上面的方法的不足之处。它是尤其适合于library一类的项目使用。

之后，在你的项目的入口文件的最上方引入babel-polyfill。比如我现在有一个Express的Web

之后在.babelrc文件中添加如下的配置，两个二选其一即可：

剩下的就是欢畅的使用async/await了。

现在就开始写ES2015的代码吧。在项目中安装ExpressJs，创建一个index.js文件。我们来试着创建一个小小的web app作为练习：

使用命令*babel-node**就可以让代码运行起来，后面的参数指定了在转义js代码的时候使用的preset和plugin。

Babel官方推荐的方法是时候用.babelrc文件，这一方式可以更加灵活。在项目的更目录上创建.babelrc文件，在里面添加你安装的preset和plugin的描述：

这样可以直接使用babel-node来执行代码，或者使用命令babel来转义代码。如：

babel命令会从配置文件中读取配置，来变异code/目录下的文件，并把转义之后的JavaScript文件导出到build/目录下。还有命令行里的参数-w，这个命令参数指定的是watch，每次code目录的文件修改后都会触发babel命令的再次执行。

上面看起来很不错了。但是还有一个问题，在你调试代码的时候，你调试的实际是babel命令转码之后的js，不是原来你编写的源代码所在的文件。调试的不是源文件，多少会有些不便。比如下面的文件会抛出一个异常：

在转码命令中加一个--source-maps可以解决这个问题：

上文讲述了如何使用Babel实现ES201x的开发。但是在正式的开发中，上面的这些配置还略显不足，尤其是你的项目包括web端、server端，尤其web端不仅处理ES201x的代码还需要处理。所以需要Gulp出场。

这玩意儿看起来很复杂，你定义了编译的过程。其实掌握了以后很好用，尤其是可以自动处理很多东西，节约大把时间。要使用Gulp，必须先安装NodeJS。这个基本是标配。然后你会用到它的命令行工具。

在最新发布的Gulp里有一点调整。gulp-cli从gulp分离出来作为单独的一部分使用。所以，如果你已经安装过gulp之前的版本需要先删除：

gulp的使用还是很简单的，主要就是在gulpfile.babel.js文件中添加各种task。在这些task中一定要添加一个叫做default的task，gulp命令的执行起点就是从这里开始。

1.使用eslint检查代码，发现代码风格和潜在的错误。

2.自动实现ES201x -> ES5的代码转码，并把转码后的代码放在指定目录下。

以上这些“任务”都是用gulp自动实现。该如何配置呢？

要在gulp中使用各种请他的类似于eslint这样的功能的时候需要使用在gulp上的对应的插件。没错，gulp的设计思路和gulp基本一样：插件机制。

那么我们就需要首先下载eslint的插件：

在开始编写我们的第一个task之前, 做最后的准备工作。首先需要配置.eslintrc文件。eslint会根据这个文件定义的规则检查代码的风格。我们不准备大批的配置规则，这样非常耗时间而且也照顾不到很多我们项目已经保留下来的编码风格。所以，airbnb的一套规则拿来使用时最好的办法。

要使用airbnb的一套规则就需要安装他们的eslint扩展：

env指定环境是支持es6的，rules指定的是一些补充内容，比如字符串使用单引号还是双引号等。这个是根据个人喜好配置的，你可以选择添加你需要的规则。最后是extends，这里配置airbnb就用上了airbnb的一套eslint编码检查规则。

引入相关模块之后开始写任务：

如前文所述，default任务是必须：

跳转到项目的目录下，运行gulp命令。会得到如下的输出：

如果你不想用sourcemaps的话，可以这么写：

把gulp放在npm命令体系下

babel老早就配置好了，现在和配置好了gulp。gulp每次输入命令基本上就是手动执行。现在应该让这个命令半自动执行了。

如此一来，很多的命令都可以像gulp一样放在npm的scripts里执行。比如，现在可以在命令行李输入如下命令来实现lint和babel转码：

感谢各位的阅读！关于“怎么在NodeJS项目中优雅的使用ES6”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

(一)首先平常是怎么引入文件的

(二)据了解没有模块化概念之前, js在项目开发当中, 站的地位非常低

1. 在ie6之前, 是没有js引擎的, 当时js应该在渲染引擎中, 在当时写一点js代码, 浏览器就直接崩溃了
2. ie6之后出来了javascript引擎, 就是单独列出了一个 js 的解释器, 当时的写法是

1. 浏览器后来发展功能加多, js代码加多, 这种写法不行了, 页面会写一堆js, 不好维护, 这是就用了开始的方法, 所有的逻辑放到一个文件中去维护, 然后只引入这一个文件

1. 开始我们说所有逻辑都放到一个js中, 但是如果多个页面呢? 每个页面都需要引入一次, 那不是重复引入吗
2. 所以就想到了, 一个页面使用一个js去维护, (以页面为思想 分模块 分js文件)但是还是不合理
3. 想到通过程序来划分模块, 那个页面用到这个程序就引入这个程序

1. 引入很多程序时就会出现
2. 文件相互依赖, 顺序不对时, 就会报错
3. 那么模块化解决的问题就是:

(五)所以我们在解决模块化文件就想到创建作用域, 谁创建作用域就是函数

1. 这里我们想就会创建一个命名函数, 然后调用它, 将逻辑写到函数中
2. 我们将它放在作用域中, 但是需要在外部拿到数据, 就需要return 并且需要写成对象, 这样就可以导出很多数据

1. 这样是解决了 , 但是, 看到这里是依赖b的, 所以就有了, 将每个模块抛出的东西去接收 模块A:

• 这里看到就是模块的注入
• 模块之间独立并且相互依赖

5. 但是我么在es5的方法中, 依然没有解决引入顺序不对就会报错的问题

(六)讨论到目前就是使用立即执行函数做模块化, 使用的是javascript语法本身去实现 [模块化, 插件化]

• 前面所有模块加载完毕才执行回调函数, 这也叫前置依赖
• 一个模块的回调函数的执行, 必须依赖前面的模块的执行完毕, 也就是前置依赖

看控制台发现了引入模块通过async实现异步加载

CMD - 他是阿里为模块化做的贡献

• AMD 导入先加载模块, 依赖前置(不懂看上面)
• CMD 依赖就近 按需加载, 虽然引入写在前面, 但是什么时候用到了他才会加载

通过结果看出, 不同点

• commonJS 模块输出的是一个值的拷贝
• ES6 输出的是值的引用

• commonJS模块是在运行时加载(因为commomJS是运行在服务端的, 程序编译后, 当正式运行时遇到require函数才会加载)
• es6模块是在编译时加载(es6是载编译时模块就已经存在了)

最后我觉得, 刚开始js根本没有想到自己会发展这么快, 他以为自己只是窗口的简单脚本, 大量的项目, 不得不发明模块化, 所以es6他给了所有人一个交代, 去更新了这些必要的功能

关于前端工程化，是一个很大的命题，你在知乎上搜索前端工程化，会有一些文章，这些文章能够帮助你理解前端工程化。javascript

说一下我理解的前端工程化吧，前端工程化不仅仅包括前端的模块化、组件化、自动化，还包括前端性能优化，前端目录规划，前端规范化，自动化测试，发布等等一系列知识。这里我就不一 一介绍了，感兴趣的也能够去读读张云龙的文章：css

其实这里能够做为一篇文章来书写了，不过，假如你不了解，能够网上搜了一下前端设计模式，关于设计模式也是有很多文章的。vue

固然，这个是老的话题，有的在初中级前端面试中也会说起到。可是在中高级面试的时候，你要说出前端安全性问题防护，及前端常见安全性问题的攻击原理是什么。html5

一、xss跨站脚本攻击（原理、如何进行的、防护手段是什么，要说清楚）java

二、CSRF跨站请求伪造（如何伪造法？怎么防护？等等都要说清楚）node

三、sql脚本注入（注入方式，防护方式）mysql

四、上传漏洞 （防护方式）jquery

关于跨域，我前面不少文章也说起了，，这篇文章能够看一下。

另外，面试官可能会问及 ，关于这一点，也能够看我以前刚刚写的文章：

在页面中引入base64.js文件，调用方法为：

在页面中引用md5.js文件，调用方法为

页面中引入sha1.js，调用方法为

这个可能涉及的东西也蛮多，能够看我前段时间总结的系列文章：

上面问题多是前端通用问题吧，下面的问题可能都是相关知识点的，下面简单总结一下：

这个考察你对webpack的理解是使用程度。

例如可能考察以下知识点：

四、如何加快打包速度，减小打包体积

1、flux、redux、vuex数据流向，(例如：点击按钮触发到状态更改，数据是如何流向的？)

3、vuex数据流？为何要遵循这个数据流？假如在页面中直接修改state,而不是经过mutation 的commit方式修改，会怎么样？

vue相关的问题有不少。仅举例：

1、vue-router如何作历史返回提示？ 2、vue-router如何作用户登陆权限等？ 3、vue生命周期 4、vue组件通讯 5、vue服务器渲染 6、vue性能优化

1、冒泡排序 2、数据去重方法 3、取1000个数字里面的质数

1、自动化测试相关 2、mock数据相关 3、pwa相关 4、nginx相关 5、微信小程序相关 6、敏捷开发等

以前在兴安得力的时候，我也出过前端的面试题。那么前端人员在外面面试的时候，通常技术人员都会考察咱们那些地方呢？我在这里不妨总结一下！（PS：有点小邪恶，这个公开以后，对于面试者来讲是方便了。可是，假如你是公司技术人员，是面试官，您不妨修改一下题目，变通一下！）

1、您对js的原型是如何理解的？您对js的继承是如何理解的？可否举例说明js的继承？

关于这个题目，我以前的一篇文章  ，您能够看一下。理解一下原型prototype，关于继承，那主要是js原型链的继承。关于继承的理解及举例（我这里就不详细介绍了，简单介绍以后，你即便背过了，也不必定理解，对于公司也是不公平的）。我仍是推荐面试者看一本书《[JavaScript高级程序设计(第3版)]》，这本书对js讲的很详细。关于这个题目，您能够阅读其第六章就能够了！认真阅读以后，相信你能理解，也可以简单的说出来！

关于js的继承，确实是重点和难点，我写过两篇博客，你们能够看下：

2、js闭包？举例并说明其主要的做用！

关于闭包，实际上是指有权访问另外一个函数做用域中变量的函数。具体我以前也写过一篇文章，能够看一看！

3、js数组主要有哪些方法？主要参数你了解吗？

具体你能够查一下，经常使用的通常有以下：

1 、shift():删除数组的第一个元素,返回删除的值。这里是0

三、pop():删除数组的最后一个元素，返回删除的值。这里是2.

四、push(3):将参数加载到数组的最后，返回数组的长度，如今List中时：0,1,2,3

七、reverse：将数组反序

九、slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组

5、js数组去重和排序

具体我就不详细描述了。

关于正则： ，这篇文章应对面试足够了！

让你写个简单的正则，去掉字符串左右空格。具体看看我以前的文章

关于正则，你能够去了解一下！

能够查询，了解一下！看下这几篇文章 和 最后关于js实现ajax的，最新出了js的fetch方法，很不错的！

能够看下我以前的文章：

10、js操做符，字符串截取等

用法差很少，传递参数不一样。具体你能够网上查查，也能够看下个人文章 

12、类数组转换为数组的方法

十3、cookie 不设置过时时间，默认过时时间是多少？

十4、改变数组长度的方法有哪些？

2、如何处理缓存？如何清除缓存。

ajax随机数、ajax参数、meta中设置等。能够看下我写的 

3、http请求问题，HTTP请求信息由那3部分组成？

关于图片的请求，能够看我以前的一篇文章 

4、前端性能优化问题，你是如何处理前端性能问题的？

5、网站js和css如何压缩？有哪些方法？

SASS等 能够对css进行自动压缩！

也能够用构建工具进行。能够看下 

6、用到哪些css插件？

7、让你本身搭建一个网站，你是如何作架构的？

8、一些状态码你了解吗？

200成功类、300重定向类、400客户端类、500服务器端类。具体能够网上查一下！

9、如何用浏览器进行代码调试？

谷歌浏览器、火狐、IE等。（不明白的同窗具体网上能够查一下）

1、假如一个页面，左侧固定，右侧自适应，你是如何作到的？

方法不少，通常是margin和浮动，具体能够网上查一下。很简单。

2、html5新的标签和特性有哪些？

html5标签有不少，你能够网上查一下。

3、你经常使用的css3有哪些？说出你记得的。

哈哈哈，这个不少，你要再复习一下css3包括其动画等等。

4、如何处理浏览器兼容性问题？

具体能够看个人一篇文章：

1、作手机网站长见的兼容问题有哪些？

2、网站如何自适应的？响应式网站通常如何制做？

能够随便聊聊。能够看下

3、zepto.js使用过程当中有哪些问题？jquerymobile用过吗？会有哪些问题？

用过的话，能够随便聊一下！

例如，大家聊到数据库，数一下如何用mongo作分页等等，包括mysql数据库等等。

聊到inux系统，linux经常使用的命令。

聊到前端架构，及百度fits的jello等。

聊到经常使用的版本控制工具git或者SVN，讲讲git经常使用的命令，git回滚到某个版本怎么作（ $ git reset --hard 某个版本号）

人事面试和技术面试是有区别的，人事通常问一些概况总结方面的问题，我下面举一些列子吧！

1、你作了这么多项目，让你感觉最深，印象最深的是哪一个项目？你从中学到了什么？为何会感觉最深？

2、作前端开发这么多年来？说下你的感觉吧！

3、简单自我介绍一下本身。

4、你对公司有什么须要了解的？

5、谈到薪资，谈到离职缘由，谈到将来几年的规划等等，我在这里就不具体说了。

上面是我面试过程当中最多见的一些问题。注意：面试的时候千万要真诚，不要撒谎，是什么就是什么，我列举上面题目的缘由是有些前端人员可能技术很好，可是面试的时候紧张，没有准备。这样你简单准备了以后，就能发挥本身正常水平！广大朋友们，加油吧！