使用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

现在我们用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 开始调试

屏幕快照 2018-07-28 22.06.02.png