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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
js实现左右轮播图
Jan 09 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
解决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
PHP4实际应用经验篇(4)
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
python 打印对象的所有属性值的方法
2016/09/11 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
Python页面加载的等待方式总结
2021/02/28 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
高一军训口号
2015/12/25 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书