解决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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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获取金书网的书名的实现代码
2010/06/11 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
详解Python发送邮件实例
2016/01/10 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
python线程优先级队列知识点总结
2021/02/28 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
电视节目策划方案
2014/05/16 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
先进工作者推荐材料
2014/12/23 职场文书
教师个人成长总结
2015/02/11 职场文书
面试通知短信
2015/04/20 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers