手把手教你如何在Node中使用ES6

原创 年树先生 随笔 node 8488阅读 10 天前 举报

Node本身已经支持部分ES6语法,但是import export,以及async await(Node 8 已经支持)等一些语法,我们还是无法使用。为了能使用这些新特性,我们就需要使用babel把ES6转成ES5语法

安装babel

基础知识

babel的配置文件是.babelrc

新建一个demo文件夹,文件夹下新建 1.js

同时新建.babelrc配置文件

终端运行

可以看见,在文件夹下,新建了一个dist.js,这就是babel转码后的文件
但是,dist.js目前是没有任何变化的,因为我们在配置文件里面没有声明转码规则,所以babel无法转码
安装转码插件

修改配置文件

es2015可以转码es2015的语法规则,stage-0可以转码ES7语法(比如async await)
再次运行终端

可以看见,箭头函数被转码了

我们试下async await

转码后的文件

再试下 import export
util.js

1.js

这次,要把1.js和util.js都转码,我们可以把整个文件夹转码

新生成的dist文件夹下,就有转码后的文件。可以看见,转码后,仍然使用的是module.exportsCMD模块加载
babel-preset-env
上面的转码其实有个缺陷,就是babel会默认把所有的代码转成es5,这意味着,即使node支持let关键字,转码后,也会被转成var
我们可以使用babel-preset-env这个插件,它会自动检测当前node版本,只转码node不支持的语法,非常方便

.babelrc

1.js

编译出来后

可以看见,class和const并没有被转码,因为当前node版本(8.9.3)支持该语法
在实际项目中使用ES6语法
Koa2需要Node v7.6.0以上的版本来支持async语法,同时,我们也想在Koa2中使用import模块化写法

新建一个文件夹app
util.js

app.js

如果直接启动文件,肯定会报错

我们需要一个入口文件,来转码
index.js

访问http://localhost:3000/可以看见页面了!
babel-register是实时转码的,所以实际发布时,应该先把整个app文件夹转码

这次,只要启动dist下的app.js即可

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复