使用babel，转换ES6+代码运行使用babel，转换ES6+代码运行

我们知道使用node直接运行ES6+语法的js代码会报如下的错误

import calculator from './calculator'; ^^^^^^SyntaxError: Unexpected token import at createScript (vm.js:80:10)

import语法无法识别
我们可以通过配置babel，安装对应的转换插件，然后就可以运行了
上代码：
我自己写了一个类似Promise的实现(只有then方法)：

//CustomPromise.js class CustomPromise { // promiseFunc: function(resolve, reject) constructor(promiseFunc) { this.resolve = this.resolve.bind(this); this.reject = this.reject.bind(this); this.then = this.then.bind(this); this.successCallbacks = []; promiseFunc(this.resolve, this.reject); }resolve(args) { this.fullfill = true; this.result = args; this.successCallbacks.forEach(callback => { callback(this.result); }); }reject(error) { // TODO }then(callback) { this.successCallbacks.push(callback); if (this.fullfill) { // 调用当次就行了 callback(this.result); }return this; } }module.exports = CustomPromise;

然后在index.js中调用，由于promise是异步调用，我们需要让代码挂住，这里使用一个server

import CustomPromise from './CustomPromise'; import http from 'http'; function sleep(timeout) { return new CustomPromise(function (resolve, reject) { setTimeout(function () { resolve(); }, timeout*1000); }) }var a = sleep(3).then( ()=>console.log('trigger 1') ).then( ()=>console.log('trigger 2') ); //挂住程序 http.createServer(function(request, response){ response.writeHead(200, { 'Content-Type': 'text-plain' }); response.end('Hello World\n'); a.then(()=>console.log('recv request')); }).listen(8124);

好了，下面我们配置babel，安装对应的插件
根目录下创建.babelrc文件，配置如下

{ "presets": [ "latest", "env" ], "plugins": [], "sourceMaps": true, "retainLines": true }

安装插件

npm i babel-preset-latest --save-dev npm i babel-preset-env --save-dev

【使用babel，转换ES6+代码运行】现在我们用node执行，还是会报错

node index.js /Users/xxx/Documents/temp/babel-blog/index.js:5 import CustomPromise from './CustomPromise'; ^^^^^^SyntaxError: Unexpected token import

我们可以使用babel-node命令来执行，首先安装babel-cli

npm i babel-cli --save-dev

ok, 这样子我们就可以使用babel-node命令运行了，如下

$ npx babel-node index.js trigger 1 trigger 2

但是这样我们依然无法用node来调试啊,不能使用如下命令，因为还是会报错

node --inspect-brk index.js

其实最新版本，如果想要调试ES6 代码，有一个要求调试的入口文件必须是ES5，我们修改index.js

//不使用import const CustomPromise = require('./CustomPromise') const http = require('http')function sleep(timeout) { return new CustomPromise(function (resolve, reject) { setTimeout(function () { resolve(); }, timeout*1000); }) }var a = sleep(3).then( ()=>console.log('trigger 1') ).then( ()=>console.log('trigger 2') ); //挂住程序 http.createServer(function(request, response){ response.writeHead(200, { 'Content-Type': 'text-plain' }); response.end('Hello World\n'); a.then(()=>console.log('recv request')); }).listen(8124);

这样就能使用node --inspect-brk index.js了，然后访问chrome://inspect 开始调试