解决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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
js实现数字跳动到指定数字
Aug 25 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
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
自荐信怎么写好
2013/11/11 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
小学生打架检讨书
2014/01/26 职场文书
公司保密承诺书
2014/03/27 职场文书
地球一小时倡议书
2014/04/15 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
企业党员个人自我评价
2014/09/20 职场文书
2014年统战工作总结
2014/12/09 职场文书
公开致歉信
2019/06/24 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers