1. 程式人生 > 程式設計 >解決node終端下執行js檔案不支援ES6語法

解決node終端下執行js檔案不支援ES6語法

最近寫一些簡單的測試程式碼時,為了方便直接在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,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','man');
console.log(jone.name);
exports.default = Person;

如果要直接在終端中執行呢,可以用如下命令babel-node xxxx,xxxx表示對應的目錄及檔案

解決node終端下執行js檔案不支援ES6語法

這樣,我們就可以在終端中執行大部分的ES6程式碼了,也可以在學習新語法的時候,通過babel轉換成老的語法來幫助自己理解原理。

到此這篇關於解決node終端下執行js檔案不支援ES6語法的文章就介紹到這了,更多相關解決node終端下執行js檔案不支援ES6語法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!