解决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的10个怪癖和秘密分享
Aug 28 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 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
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python线程、进程和协程详解
2016/07/19 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python字典的遍历3种方法详解
2019/08/10 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
方法名是否可以与构造器的名字相同
2012/06/04 面试题
开业庆典答谢词
2014/01/18 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js