解决节点终端下运行js文件不支持ES6语法

  

最近写一些简单的测试代码时,为了方便直接在节点终端执行发现有些ES6语法不支持,记录一下解决方式

  

  

新建class.js文件后添加如下代码

     //建设者   类人{   构造函数(姓名、年龄、性别){   this.name=名称;   这一点。年龄=年龄;   这一点。性别=性;   }   getInfo () {   返回的名字:$ {this.name},年龄:$ {this.age},性:$ {this.sex} ';   }      }   var约恩=新人(“约翰”,18岁,“男人”);   console.log (jone.name);   出口违约人;      

在终端中运行代码会提示如下错误

  

解决节点终端下运行js文件不支持ES6语法

  

不识别出口关键字,因为节点环境中的模块导入导出是CommonJS规范实现的,使用的关键字分别是需要和出口。(其他比较流行的还有AMD方式的requirejs以及CMD方式的seajs)

  

  

我们可以查看一下节点环境下支持的ES6语法
  可以先通过<代码>节点- v 命令查看一下版本,可以看到我本地的版本是10.16.2

  

解决节点终端下运行js文件不支持ES6语法

  

接着全局安装一下npm包
  

        npm安装- g es-checker      

安装完成后就可以通过执行<代码> es-checker 命令查看节点的支持率及详情
  

  

可以看到如下输出,

  

解决节点终端下运行js文件不支持ES6语法

  

最末尾显示的是

  

解决节点终端下运行js文件不支持ES6语法”> <br/>
  </p>
  <p>表示不支持模块方法</p>
  <p> </p>
  <p>怎么解决呢,可以通过添加巴别塔命令,将代码转换为被支持的写法<br/>
  </p>
  <p>在项目的工程目录下,也就是包。json同级目录下执行<br/>
  </p>
  
  <pre类=   npm安装——save-dev babel-cli babel-preset-es2015 babel-preset-es2017      

其中babel-cli使我们可以在终端中使用巴贝尔命令,如同webpack对应的webpack-cli包,而babel-preset - *是巴别塔转换代码时所依赖的前置规则的插件集合,安装完成后,在同目录下配置使用巴贝尔,新建.babelrc文件,文件中输入如下配置

        npm安装——save-dev babel-cli babel-preset-es2015 babel-preset-es2017      

其中预设字段里添加我们的转换规则,可以只写前边提到的babel-preset——对应的关键字作为缩写,插件中可以配置一些定义转换规则的插件。
  配置完成后,就可以在我的终端中用宝贝对我的代码进行转换了,直接执行巴贝尔命令<代码>巴别塔类。js代码可以看到我们的代码被转换成了ES2015的版本。如下

        PS D: \ git \ \ mytest>研究;巴别塔src/对象/class.js   使用严格的;      Object.defineProperty(出口,“__esModule”{   值:true   });      var _createClass=function(){函数defineProperties(目标、道具){(var=0;我& lt;props.length;我+ +){var描述符=道具(我);描述符。可列举的=描述符。可列举的| |假;描述符。可配置=true;如果在描述符(“价值”)描述符。可写=true;Object.defineProperty(目标,描述符。键,描述符);}}返回函数(构造函数,protoProps staticProps){如果protoProps defineProperties(构造函数。原型,protoProps);如果staticProps defineProperties(构造函数,staticProps);构造函数返回;};} ();      函数_classCallCheck(实例,构造函数){如果!(实例实例构造器)){抛出新的TypeError(“不能调用一个类作为一个函数”);}}//建设者   var人=function () {   函数的人(姓名、年龄、性别){   _classCallCheck(这个人);      this.name=名称;   这一点。年龄=年龄;   这一点。性别=性;   }      _createClass(人,[{   关键:“getInfo”,   价值:函数getInfo () {   返回的名字:“+ this.name +”,年龄:+。年龄+”,性:' + this.sex;   }   }));      返回的人;   } ();      var约恩=新人(“约翰”,18岁,“男人”);   console.log (jone.name);   exports.default=人;      

解决节点终端下运行js文件不支持ES6语法