Babel 基础及代码转换简单探究

function abs(number) {
  if (number >= 0) {  // test
    return number;  // consequent
  } else {
    return -number; // alternate
  }
}

const visitor = {
  IfStatement() {
    console.log('get if');
  }
};

const visitor = {
  IfStatement: {
    enter() {},
    exit() {}
  }
}

var babel = require('babel-core');
var t = require('babel-types');

const code = `d = a + b + c`;

const visitor = {
  Identifier(path) {
    console.log(path.node.name); // d a b c
  }
};

const result = babel.transform(code, {
  plugins: [{
    visitor: visitor
  }]
});

{
  type: "FunctionDeclaration",
  id: {
    type: "Identifier",
    name: "abs"
  },
  params: [{
    type: "Identifier",
    name: "number"
  }],
  body: {
    type: "BlockStatement",
    body: [{
      type: "IfStatement",
      test: {
        type: "BinaryExpression",
        left: {
          type: "Identifier",
          name: "number"
        },
        operator: ">=",
        right: {
          type: "Literal",
          value: "0"
        }
      },
      consequent:{
        type: "BlockStatement",
        body: [{
          type: "ReturnStatement",
          argument: {
            type: "Identifier",
            name: "number"
          }
        }]
      },
      alternate: {
        type: "BlockStatement",
        body: [{
          type: "ReturnStatement",
          argument: {
            type: "UnaryExpression",
            opertaor: "-",
            argument: {
              type: "Identifier",
              name: "number"
            },
            name: "number"
          }
        }]
      }
    }]
  }
}

const PluginA = {
  Identifier() {},
  FunctionDeclaration() {}
}
const PluginB = {
  BinaryExpression() {},
  FunctionDeclaration() {}
}
// 进行处理后得到(源码可见 babel-traverse/lib/visitors.js 中的 function merge())
let rootVisitor = {
  Identifier: [PluginA.Identifier],
  BinaryExpression: [PluginB.Identifier],
  FunctionDeclaration: [PluginA.FunctionDeclaration, PluginB.FunctionDeclaration]
}

file.wrap(code, function () {
  file.addCode(code);
  file.parseCode(code); // 去除顶部的 #!/usr/bin/env node 信息，之后使用 babylon 解析出 ast，使用 babel-traverse 进行遍历
  return file.transform();
});

var a = 1;
let b = 2;
const c = 3;

var a = 1;
var b = 2;
var c = 3;

let a1 = 1;
let a2 = 6;
{
    let a1 = 2;
    let a2 = 5;
    {
        let a1 = 4;
        let a2 = 5;
    }
}
a1 = 3;

var a1 = 1;
var a2 = 6;
{
    var _a = 2;
    var _a2 = 5;
    {
        var _a3 = 4;
        var _a4 = 5;
    }
}
a1 = 3;

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

var a = [];

var _loop = function _loop(i) {
  a[i] = function () {
    console.log(i);
  };
};

for (var i = 0; i < 10; i++) {
  _loop(i);
}
a[6](); // 6

let [foo, [[bar], baz]] = [1, [[2], 3]];

let [ , , third] = ["foo", "bar", "baz"];
// third = "baz"

let [x, , y] = [1, 2, 3];
// x = 1 y = 3

let [head, ...tail] = [1, 2, 3, 4];
// head = 1 tail = [2, 3, 4]

let [i, j, ...k] = ['a'];
// i = "a" j = undefined k = []

let [m, n] = [1];
// n = undefined

let [a, [b], d] = [1, [2, 3], 4];
// a = 1 b = 2 d = 4

const [a, b, c, d, e] = 'hello';

let {length : len} = 'hello';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var foo = 1,
    bar = 2,
    baz = 3;
    
var _ref = ["foo", "bar", "baz"],
    third = _ref[2];

var _ref2 = [1, 2, 3],
    x = _ref2[0],
    y = _ref2[2];

var head = 1,
    tail = [2, 3, 4];

var _ref3 = ['a'],
    i = _ref3[0],
    j = _ref3[1],
    k = _ref3.slice(2);

var _ref4 = [1],
    m = _ref4[0],
    n = _ref4[1];

var a = 1,
    _ref5 = [2, 3],
    b = _ref5[0],
    d = 4;

var _hello = 'hello',
    _hello2 = _slicedToArray(_hello, 5),
    x1 = _hello2[0],
    x2 = _hello2[1],
    x3 = _hello2[2],
    x4 = _hello2[3],
    x5 = _hello2[4];

var _hello3 = 'hello',
    len = _hello3.length;

var obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

var { p: [x, { y }] } = obj;
// x = "Hello" y = "World"

var _slicedToArray = (function() {
    function sliceIterator(arr, i) {
        var _arr = [];
        var _n = true;
        var _d = false;
        var _e = undefined;
        try {
           // 用 Symbol.iterator 造了一个可遍历对象，然后进去遍历。
            for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
                _arr.push(_s.value);
                if (i && _arr.length === i) break;
            }
        } catch (err) {
            _d = true;
            _e = err;
        } finally {
            try {
                if (!_n && _i["return"]) _i["return"]();
            } finally {
                if (_d) throw _e;
            }
        }
        return _arr;
    }
    return function(arr, i) {
        if (Array.isArray(arr)) {
            return arr;
        } else if (Symbol.iterator in Object(arr)) {
            return sliceIterator(arr, i);
        } else {
            throw new TypeError("Invalid attempt to destructure non-iterable instance");
        }
    };
})();

var obj = {
  p: ['Hello', { y: 'World' }]
};

var _obj$p = _slicedToArray(obj.p, 2),
    x = _obj$p[0],
    y = _obj$p[1].y;
// x = "Hello" y = "World"

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

function move() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { x: 0, y: 0 },
      x = _ref.x,
      y = _ref.y;

  return [x, y];
}

move({ x: 3, y: 8 }); // [3, 8]
move({ x: 3 }); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

// default parameter values
function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

// rest parameter
function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)

// arrow function
var obj = {
    prop: 1,
    func: function() {
        var _this = this;
 
        var innerFunc = () => {
            this.prop = 1;
        };
 
        var innerFunc1 = function() {
            this.prop = 1;
        };
    },
 
};

// default parameter values
function log(x) {
    var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'World';

    console.log(x, y);
}

log('Hello'); // Hello World
log('Hello', 'China'); // Hello China
log('Hello', ''); // Hello

// rest parameter
function push(array) {
    for (var _len = arguments.length, items = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        items[_key - 1] = arguments[_key];
    }

    items.forEach(function (item) {
        array.push(item);
        console.log(item);
    });
}

var a = [];
push(a, 1, 2, 3);

// arrow function
var obj = {
    prop: 1,
    func: function func() {
        var _this2 = this;

        var _this = this;

        var innerFunc = function innerFunc() {
            _this2.prop = 1;
        };

        var innerFunc1 = function innerFunc1() {
            this.prop = 1;
        };
    }

};

const prop2 = "PROP2";
var obj = {
    ['prop']: 1,
    ['func']: function() {
        console.log('func');
    },
        [prop2]: 3
};

var obj = {
    toString() {
     // Super calls
     return "d " + super.toString();
    },
};

var _get = function get(object, property, receiver) {
    // 如果 prototype 为空，则往 Function 的 prototype 上寻找
    if (object === null) object = Function.prototype;
    var desc = Object.getOwnPropertyDescriptor(object, property);
    if (desc === undefined) {
        var parent = Object.getPrototypeOf(object);
        // 如果在本层 prototype 找不到，再往更深层的 prototype 上找
        if (parent === null) {
            return undefined;
        } else {
            return get(parent, property, receiver);
        }
    // 如果是属性，则直接返回
    } else if ("value" in desc) {
        return desc.value;
    // 如果是方法，则用 call 来调用，receiver 是调用的对象 
    } else {
        var getter = desc.get;// getOwnPropertyDescriptor 返回的 getter 方法
        if (getter === undefined) {
            return undefined;
        }
        return getter.call(receiver);
    }
};

var _obj, _obj2;

function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}

var prop2 = "PROP2";
var obj = (_obj = {}, _defineProperty(_obj, 'prop', 1), _defineProperty(_obj, 'func', function func() {
    console.log('func');
}), _defineProperty(_obj, prop2, 3), _obj);

var obj = _obj2 = {
    toString: function toString() {
        // Super calls
        return "d " + _get(_obj2.__proto__ || Object.getPrototypeOf(_obj2), 'toString', this).call(this);
    }
};

var a = 5;
var b = 10;
 
function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world "
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50
}
 
tag`Hello ${ a + b } world ${ a * b }`;

var _templateObject = _taggedTemplateLiteral(["Hello ", " world ", ""], ["Hello ", " world ", ""]);

// _templateObject = ["Hello ", " world ", "" , raw: Array[3]]

// 给传入的 object 定义了 strings 和 raw 两个不可变的属性。
function _taggedTemplateLiteral(strings, raw) {
  return Object.freeze(Object.defineProperties(strings, {
    raw: {
      value: Object.freeze(raw)
    }
  }));
}

var a = 5;
var b = 10;

function tag(strings) {
  // strings = ["Hello ", " world ", "", raw: Array[3]]    arguments = [Array[3], 15, 50]
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world "
  console.log(arguments.length <= 1 ? undefined : arguments[1]); // 15
  console.log(arguments.length <= 2 ? undefined : arguments[2]); // 50
}

tag(_templateObject, a + b, a * b);

es6 的这种新特性给模板处理赋予更强大的功能，一改以往对模板进行各种 replace 的处理办法，用一个统一的 handler 去处理。babel 的转换主要是添加了 2 个属性，通过捕获传参和 arguments 变量来获取具体的值。

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  walk() {
    console.log('walk');
  }
  run() {
    console.log('run')
  }
  static getType() {
    return this.type;
  }
  get getName() {
    return this.name;
  }
  set setName(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, type) {
    super(name, type);
  }
  get getName() {
    return super.getName();
  }
}

// 与上同
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

// _creatClass 用于创建类及其对应的方法
var _createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      // es6 规范要求类方法为 non-enumerable
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      // 对于 setter 和 getter 方法，writable 为 false
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function (Constructor, protoProps, staticProps) {
    // 非静态方法定义在原型链上
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    // 静态方法直接定义在 constructor 函数上
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

// 子类实现 constructor
// babel 会强制子类在 constructor 中使用 super，否则编译会报错
function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  // 若call是函数/对象则返回
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

// 子类继承父类
function _inherits(subClass, superClass) {
  // 父类一定要是 function 类型
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  // 使原型链 subClass.prototype.__proto__ 指向父类 superClass，同时保证 constructor 是 subClass 自己
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  // 保证 subClass.__proto__ 指向父类 superClass
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

// 检测 constructor 正确与否
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Animal = function () {
  function Animal(name, type) {
    // 此处是 constructor 的实现
    _classCallCheck(this, Animal);

    this.name = name;
    this.type = type;
  }

  _createClass(Animal, [{
    key: 'walk',
    value: function walk() {
      console.log('walk');
    }
  }, {
    key: 'run',
    value: function run() {
      console.log('run');
    }
  }, {
    key: 'getName',
    get: function get() {
      return this.name;
    }
  }, {
    key: 'setName',
    set: function set(name) {
      this.name = name;
    }
  }], [{
    key: 'getType',
    value: function getType() {
      return this.type;
    }
  }]);

  return Animal;
}();

var Dog = function (_Animal) {
  _inherits(Dog, _Animal);

  function Dog(name, type) {
    _classCallCheck(this, Dog);

    return _possibleConstructorReturn(this, (Dog.__proto__ || Object.getPrototypeOf(Dog)).call(this, name, type));
  }

  _createClass(Dog, [{
    key: 'getName',
    get: function get() {
      return _get(Dog.prototype.__proto__ || Object.getPrototypeOf(Dog.prototype), 'getName', this).call(this);
    }
  }]);

  return Dog;
}(Animal);

// module.js
import { Animal as Ani, catwalk } from "./t1";
import * as All from "./t2";
 
class Cat extends Ani {
  constructor() {
    super();
  }
}
 
class Dog extends Ani {
  constructor() {
    super();
  }
}

// t1.js
export class Animal {
  constructor() {
  }
}
 
export function catwal() {
  console.log('cat walk');
};

// t2.js
export class Person {
  constructor() {
  }
}
 
export class Plane {
  constructor() {
  }
}

// t1.js 模块

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.catwal = catwal;

var Animal = exports.Animal = function Animal() {
  _classCallCheck(this, Animal);
};

function catwal() {
  console.log('cat walk');
};

// t2.js 模块

Object.defineProperty(exports, "__esModule", {
  value: true
});

var Person = exports.Person = function Person() {
  _classCallCheck(this, Person);
};

var Plane = exports.Plane = function Plane() {
  _classCallCheck(this, Plane);
};

// module.js

var _t = require("./t1");

var _t2 = require("./t2"); // 返回的都是exports上返回的对象属性

var All = _interopRequireWildcard(_t2);

function _interopRequireWildcard(obj) {
  // 发现是babel编译的， 直接返回
  if (obj && obj.__esModule) {
    return obj;
  // 非 babel 编译， 猜测可能是第三方模块，为了不报错，让 default 指向它自己
  } else {
    var newObj = {};
    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
      }
    }
    newObj.default = obj;
    return newObj;
  }
}

var Cat = function (_Ani) {
  _inherits(Cat, _Ani);

  function Cat() {
    _classCallCheck(this, Cat);

    return _possibleConstructorReturn(this, (Cat.__proto__ || Object.getPrototypeOf(Cat)).call(this));
  }

  return Cat;
}(_t.Animal);

var Dog = function (_Ani2) {
  _inherits(Dog, _Ani2);

  function Dog() {
    _classCallCheck(this, Dog);

    return _possibleConstructorReturn(this, (Dog.__proto__ || Object.getPrototypeOf(Dog)).call(this));
  }

  return Dog;
}(_t.Animal);