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


Posted in Javascript onApril 04, 2020

最近写一些简单的测试代码时,为了方便直接在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转换成老的语法来帮助自己理解原理。

到此这篇关于解决node终端下运行js文件不支持ES6语法的文章就介绍到这了,更多相关解决node终端下运行js文件不支持ES6语法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
JavaScript模块详解
Dec 18 Javascript
js闭包学习心得总结
Apr 17 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
vue中使用v-for时为什么不能用index作为key
Apr 04 #Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 #Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 #Javascript
Vue的data、computed、watch源码浅谈
Apr 04 #Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 #Javascript
You might like
实现获取http内容的php函数分享
2014/02/16 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
Python 变量类型及命名规则介绍
2013/06/08 Python
使用python解析xml成对应的html示例分享
2014/04/02 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python实现动态数组的示例代码
2019/07/15 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
护理自荐信
2013/10/22 职场文书
法务专员岗位职责
2014/01/02 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis