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[js]获取url参数的代码
Oct 17 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
linux面试题参考答案(10)
2013/11/04 面试题
一夜的工作教学反思
2014/02/08 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
投标保密承诺书
2014/05/19 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏