解决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 相关文章推荐
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python实现C4.5决策树算法
2018/08/29 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python如何使用字符打印照片
2020/01/03 Python
Python错误的处理方法
2020/06/23 Python
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
2014年保险公司工作总结
2014/11/22 职场文书
民主生活会汇报材料
2014/12/15 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
pandas中对文本类型数据的处理小结
2021/11/01 Python