DDR爱好者之家 Design By 杰米

最近写一些简单的测试代码时,为了方便直接在node终端执行发现有些ES6语法不支持,记录一下解决方式

现象

新建class.js文件后添加如下代码

// constructer
class Person {
 constructor(name,age,sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
 }
 getInfo() {
  return `name:${this.name},age:${this.age},sex:${this.sex}`;
 }

}
var jone = new Person('jone', 18, 'man');
console.log(jone.name);
export default Person;

在终端中运行代码会提示如下错误

解决node终端下运行js文件不支持ES6语法

不识别export关键字,因为node环境中的模块导入导出是CommonJS规范实现的,使用的关键字分别是 require和exports。 ( 其他比较流行的还有AMD方式的requirejs以及CMD方式的seajs )

查看ES6支持的语法

我们可以查看一下node环境下支持的ES6语法
可以先通过node -v 命令查看一下版本,可以看到我本地的版本是10.16.2

解决node终端下运行js文件不支持ES6语法

接着全局安装一下npm包

npm install -g es-checker

安装完成后就可以通过执行es-checker命令查看node的支持率及详情

可以看到如下输出,

解决node终端下运行js文件不支持ES6语法

最末尾显示的是

解决node终端下运行js文件不支持ES6语法

表示不支持模块方法

babel

怎么解决呢,可以通过添加babel命令,将代码转换为被支持的写法

在项目的工程目录下,也就是package.json同级目录下执行

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-es2017

其中babel-cli使我们可以在终端中使用babel命令,如同webpack对应的webpack-cli包,而babel-preset-* 是babel转换代码时所依赖的前置规则的插件集合,安装完成后,在同目录下配置使用babel,新建.babelrc文件,文件中输入如下配置

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-es2017

其中presets字段里添加我们的转换规则,可以只写前边提到的babel-preset- 对应的关键字作为缩写,plugins中可以配置一些定义转换规则的插件。
配置完成后,就可以在我的终端中用babel对我的代码进行转换了,直接执行babel命令babel class.js 可以看到我们的代码被转换成了ES2015的版本。如下

PS D:\git\study\mytest> babel src/Object/class.js
'use strict';

Object.defineProperty(exports, "__esModule", {
 value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

// constructer
var Person = function () {
 function Person(name, age, sex) {
  _classCallCheck(this, Person);

  this.name = name;
  this.age = age;
  this.sex = sex;
 }

 _createClass(Person, [{
  key: 'getInfo',
  value: function getInfo() {
   return 'name:' + this.name + ',age:' + this.age + ',sex:' + this.sex;
  }
 }]);

 return Person;
}();

var jone = new Person('jone', 18, 'man');
console.log(jone.name);
exports.default = Person;

如果要直接在终端中执行呢,可以用如下命令babel-node xxxx,xxxx表示对应的目录及文件

解决node终端下运行js文件不支持ES6语法

这样,我们就可以在终端中执行大部分的ES6代码了,也可以在学习新语法的时候,通过babel转换成老的语法来帮助自己理解原理。

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。