解决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 相关文章推荐
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
用Eclipse写python程序
2018/02/10 Python
利用python开发app实战的方法
2019/07/09 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python如何转换字符串大小写
2020/06/04 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
Python开发五子棋小游戏
2022/04/28 Python