解决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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
vue elementUI批量上传文件
Apr 26 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
javascript时间差插件分享
2016/07/18 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
利用python爬取软考试题之ip自动代理
2017/03/28 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
pandas 对group进行聚合的例子
2019/12/27 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
小学生环保标语
2014/06/13 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
导游词400字
2015/02/13 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python