最近寫一些簡單的測試代碼時，為了方便直接在node終端執(zhí)行發(fā)現(xiàn)有些ES6語法不支持，記錄一下解決方式
創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為平橋等服務(wù)建站，平橋等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為平橋企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
現(xiàn)象
新建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;在終端中運行代碼會提示如下錯誤
不識別export關(guān)鍵字，因為node環(huán)境中的模塊導(dǎo)入導(dǎo)出是CommonJS規(guī)范實現(xiàn)的，使用的關(guān)鍵字分別是 require和exports。 ( 其他比較流行的還有AMD方式的requirejs以及CMD方式的seajs )
查看ES6支持的語法
我們可以查看一下node環(huán)境下支持的ES6語法
可以先通過node -v 命令查看一下版本，可以看到我本地的版本是10.16.2
接著全局安裝一下npm包
npm install -g es-checker
安裝完成后就可以通過執(zhí)行es-checker命令查看node的支持率及詳情
可以看到如下輸出，
最末尾顯示的是
表示不支持模塊方法
babel
怎么解決呢，可以通過添加babel命令，將代碼轉(zhuǎn)換為被支持的寫法
在項目的工程目錄下，也就是package.json同級目錄下執(zhí)行
npm install --save-dev babel-cli babel-preset-es2015 babel-preset-es2017
其中babel-cli使我們可以在終端中使用babel命令，如同webpack對應(yīng)的webpack-cli包，而babel-preset-* 是babel轉(zhuǎn)換代碼時所依賴的前置規(guī)則的插件集合，安裝完成后，在同目錄下配置使用babel,新建.babelrc文件，文件中輸入如下配置
npm install --save-dev babel-cli babel-preset-es2015 babel-preset-es2017
其中presets字段里添加我們的轉(zhuǎn)換規(guī)則，可以只寫前邊提到的babel-preset- 中 對應(yīng)的關(guān)鍵字作為縮寫，plugins中可以配置一些定義轉(zhuǎn)換規(guī)則的插件。
配置完成后，就可以在我的終端中用babel對我的代碼進(jìn)行轉(zhuǎn)換了，直接執(zhí)行babel命令babel class.js 可以看到我們的代碼被轉(zhuǎn)換成了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;如果要直接在終端中執(zhí)行呢，可以用如下命令babel-node xxxx,xxxx表示對應(yīng)的目錄及文件
這樣，我們就可以在終端中執(zhí)行大部分的ES6代碼了，也可以在學(xué)習(xí)新語法的時候，通過babel轉(zhuǎn)換成老的語法來幫助自己理解原理。
到此這篇關(guān)于解決node終端下運行js文件不支持ES6語法的文章就介紹到這了,更多相關(guān)解決node終端下運行js文件不支持ES6語法內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！
