Node中使用ES6语法的基础教程


Posted in Javascript onJanuary 05, 2018

相关背景介绍

我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5。这个版本己经很多年了,且完美被各大浏览器所支持。所以很多学js的朋友可以一直分不清楚es5和javscript的关系。javascript是一门编程语言,那么它就会有版本,es5还是es6 就就是它的版本号。最新版es7己经在紧锣密布的进行中,它最新的语法会让我们写代码更新的行云流水。

引言

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

安装babel

npm install babel-cli -g

<!-- more -->

基础知识

babel的配置文件是.babelrc

{
 "presets": []
}

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

const arr = [1, 2, 3];
arr.map(item => item + 1);

同时新建.babelrc配置文件

{
 "presets": []
}

终端运行

babel 1.js -o dist.js

可以看见,在文件夹下,新建了一个dist.js,这就是babel转码后的文件

但是,dist.js目前是没有任何变化的,因为我们在配置文件里面没有声明转码规则,所以babel无法转码

安装转码插件

npm install --save-dev babel-preset-es2015 babel-preset-stage-0

修改配置文件

{
 "presets": [
 "es2015",
 "stage-0"
 ]
}

es2015可以转码es2015的语法规则,stage-0可以转码ES7语法(比如async await)

再次运行终端

babel 1.js -o dist.js

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

var arr = [1, 2, 3];
arr.map(function (item) {
 return item + 1;
});

我们试下async await

async function start() {
 const data = await test();
 console.log(data);
}
function test() {
 return new Promise((resolve, reject) => {
 resolve('ok');
 })
}

转码后的文件

'use strict';
var start = function () {
 var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
 var data;
 return regeneratorRuntime.wrap(function _callee$(_context) {
  while (1) {
  switch (_context.prev = _context.next) {
   case 0:
   _context.next = 2;
   return test();

   case 2:
   data = _context.sent;

   console.log(data);

   case 4:
   case 'end':
   return _context.stop();
  }
  }
 }, _callee, this);
 }));
 return function start() {
 return _ref.apply(this, arguments);
 };
}();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function test() {
 return new Promise(function (resolve, reject) {
 resolve('ok');
 });
}

再试下 import export

util.js

export default function say() {
 console.log('2333');
}

1.js

import say from './util';
say();

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

babel demo -d dist

新生成的dist文件夹下,就有转码后的文件。可以看见,转码后,仍然使用的是module.exportsCMD模块加载

babel-preset-env

上面的转码其实有个缺陷,就是babel会默认把所有的代码转成es5,这意味着,即使node支持let关键字,转码后,也会被转成var

我们可以使用babel-preset-env这个插件,它会自动检测当前node版本,只转码node不支持的语法,非常方便

npm install --save-dev babel-preset-env

.babelrc

{
 "presets": [
  ["env", {
  "targets": {
   "node": "current"
  }
  }]
 ]
 }

1.js

class F {
 say() {
  
 }
}
const a = 1;
babel 1.js -o dist.js

编译出来后

"use strict";
class F {
 say() {}
}
const a = 1;

可以看见,class和const并没有被转码,因为当前node版本(8.9.3)支持该语法

在实际项目中使用ES6语法

Koa2需要Node v7.6.0以上的版本来支持async语法,同时,我们也想在Koa2中使用import模块化写法

npm install --save-dev babel-register
npm install koa --save

新建一个文件夹app

util.js

export function getMessage() {
 return new Promise((resolve, reject) => {
  resolve('Hello World!');
 })
}

app.js

import Koa from 'koa';
import { getMessage } from './util'
const app = new Koa();
app.use(async ctx => {
 const data = await getMessage();
 ctx.body = data;
});
app.listen(3000);

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

node app

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

index.js

require("babel-register");
require("./app.js");
node index

访问http://localhost:3000/可以看见页面了!

babel-register是实时转码的,所以实际发布时,应该先把整个app文件夹转码

babel app -d dist

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

node app

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 #Javascript
vue脚手架中配置Sass的方法
Jan 04 #Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 #Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 #Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 #Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 #Javascript
JS实现简易换图时钟功能分析
Jan 04 #Javascript
You might like
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python实现的中国剩余定理算法示例
2017/08/05 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python实现ftp文件传输功能
2020/03/20 Python
如何利用python发送邮件
2020/09/26 Python
JAVA中的关键字有什么特点
2014/03/07 面试题
教学个人的自我评价分享
2014/02/16 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
暑期社会实践感言
2014/02/25 职场文书
房产委托公证书
2014/04/08 职场文书
办理房产过户的委托书
2014/09/14 职场文书
师德师风整改措施
2014/10/24 职场文书
2014年校长工作总结
2014/12/11 职场文书
医德医风个人总结
2015/02/28 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
python批量更改目录名/文件名的方法
2021/04/18 Python
MySQL查询学习之基础查询操作
2021/05/08 MySQL