Babel is a general purpose JavaScript compiler that allows code written for modern versions of JavaScript to be compiled into a backwards compatible format that can run on older JavaScript environments. It uses parsing, traversing an abstract syntax tree (AST), and code generation to transform code. Key parts of Babel include its parser, types module for working with AST nodes, visitor pattern for traversing nodes, and ability for third-party code (plugins) to transform the AST during parsing.

1. @thejameskyle

2. git.io/babel-handbook

3. git.io/i18n

5. Babel Sucks

6. B S

7. What is Babel?

8. A general purpose JavaScript compiler.

9. code()
0101010
1010100
High Level
Low Level

10. Static Analysis

11. Abstract Syntax Tree (AST)

12. function square(n) {
return n * n;
}

13. - FunctionDeclaration:
- id:
- Identifier:
- name: square
- params [1]
- Identifier
- name: n

14. {
type: "FunctionDeclaration",
id: {
type: "Identifier",
name: "square"
},
params: [{
type: "Identifier",
name: "n"
}],
body: {
type: "BlockStatement",
body: [{
type: "ReturnStatement",
argument: {
type: "BinaryExpression",
operator: "*",
left: {

15. {
type: "FunctionDeclaration",
id: {...},
params: [...],
body: {...}
}
{
type: "Identifier",
name: ...
}
{
type: "BinaryExpression",
operator: ...,
left: {...},
right: {...}
}

16. interface Node {
type: string;
}

17. {
type: "FunctionDeclaration",
id: {...},
params: [...],
body: {...}
}

18. Parsing
Transforming
Generating

19. Parsing:
1. Lexical Analysis
2. Syntactic Analysis

20. Lexical Analysis

21. n * n;

22. [
{ type: { ... }, value: "n" },
{ type: { ... }, value: "*" },
{ type: { ... }, value: "n" }
]

23. {
type: {
label: 'name',
keyword: undefined,
beforeExpr: false,
startsExpr: true,
rightAssociative: false,
isLoop: false,
isAssign: false,
prefix: false,
postfix: false,
binop: null,
updateContext: null
},
...
}

24. Syntactic Analysis

25. Parsing
Transforming
Generating

26. Parsing
Transformating
Generating

27. Traversal

28. {
type: "FunctionDeclaration",
id: {...},
params: [...],
body: {...}
}

29. {
type: "FunctionDeclaration",
id: {
type: "Identifier",
name: "square"
},
params: [...],
body: {...}
}

30. {
type: "FunctionDeclaration",
id: {...},
params: [{
type: "Identifier",
name: "n"
}],
body: {...}
}

31. {
type: "FunctionDeclaration",
id: {...},
params: [],
body: {
type: "BlockStatement",
body: [...]
}
}

32. {
type: "BlockStatement",
body: [{
type: "ReturnStatement",
argument: {...}
}]
}

33. {
type: "ReturnStatement",
argument: {
type: "BinaryExpression",
operator: "*",
left: {...},
right: {...}
}
}

34. {
type: "BinaryExpression",
operator: "*",
left: {...},
right: {...}
}

35. {
type: "BinaryExpression",
operator: "*",
left: {
type: "Identifier",
name: "n"
},
right: {...}
}

36. {
type: "BinaryExpression",
operator: "*",
left: {...},
right: {
type: "Identifier",
name: "n"
}
}

37. Visitors

38. const MyVisitor = {
Identifier() {
console.log("Called!");
}
};

39. function square(n) {
return n * n;
}

40. function square(n) {
return n * n;
}

41. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

42. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

43. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

44. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

45. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

46. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

47. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

48. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

49. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

50. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

51. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

52. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

53. - FunctionDeclaration
- Identifier (id)
- Identifier (params[0])
- BlockStatement (body)
- ReturnStatement (body)
- BinaryExpression (argument)
- Identifier (left)
- Identifier (right)

54. const MyVisitor = {
Identifier: {
enter() {
console.log("Entered!");
},
exit() {
console.log("Exited!");
}
}
};

55. Paths

56. {
type: "FunctionDeclaration",
id: {
type: "Identifier",
name: "square"
},
...
}

57. {
parent: {
type: "FunctionDeclaration",
id: {...},
....
},
node: {
type: "Identifier",
name: "square"
}
}

58. {
parent: {
type: "FunctionDeclaration",
id: {...},
....
},
node: {
type: "Identifier",
name: "square"
}
}

59. Paths in visitors

60. const MyVisitor = {
Identifier(path) {
console.log("Visiting: " + path.node.name);
}
};

61. Scopes

62. // global scope
function scopeOne() {
// scope 1
function scopeTwo() {
// scope 2
}
}

63. var global = "I am in the global scope";
function scopeOne() {
var one = "I am in scope one";
function scopeTwo() {
var two = "I am in scope two";
}
}

64. function scopeOne() {
var one = "I am in scope one";
function scopeTwo() {
one = "I updating a ref in scope one";
}
}

65. function scopeOne() {
var one = "I am in scope one";
function scopeTwo() {
var one = "I am creating a new `one`";
}
}

66. Scopes

67. {
path: path,
block: path.node,
parentBlock: path.parent,
parent: parentScope,
bindings: [...]
}

68. Bindings

69. function scopeOnce() {
var ref = "This is a binding";
ref; // This is a reference to a binding
function scopeTwo() {
ref; // This is a reference to a binding
}
}

70. {
identifier: node,
scope: scope,
path: path,
kind: 'var',
referenced: true,
references: 3,
referencePaths: [path, path, path],
constant: false,
constantViolations: [path]
}

71. The many modules of Babel

72. Babel Types

73. defineType("BinaryExpression", {
builder: ["operator", "left", "right"],
fields: {
operator: {
validate: assertValueType("string")
},
left: {
validate: assertNodeType("Expression")
},
right: {
validate: assertNodeType("Expression")
}
},
visitor: ["left", "right"],
aliases: ["Binary", "Expression"]
});

74. defineType("BinaryExpression", {
builder: ["operator", "left", "right"],
fields: {
operator: {
validate: assertValueType("string")
},
left: {
validate: assertNodeType("Expression")
},
right: {
validate: assertNodeType("Expression")
}
},
visitor: ["left", "right"],
aliases: ["Binary", "Expression"]
});

75. t.binaryExpression(
"*",
t.identifier("a"),
t.identifier("b")
);

76. {
type: "BinaryExpression",
operator: "*",
left: {
type: "Identifier",
name: "a"
},
right: {
type: "Identifier",
name: "b"
}
}

77. a * b

78. Babel Types

79. That's Babel.

80. Babel
Sucks

81. Babel doesn't do anything in the least
efficient way possible.

82. function babel(code) {
return code;
}

83. function babel(code) {
return code
}

84. const babel = code => code

85. Plugins!

86. Babel is only as good as the
ecosystem built around it

87. You.

88. Writing your first Babel Plugin.

89. export default function(babel) {
// plugin contents
}

90. export default function(babel) {
var t = babel.types;
// plugin contents
};

91. export default function(babel) {
var t = babel.types;
return {
visitor: {
// visitor contents
}
};
};

92. foo === bar;

93. {
type: "BinaryExpression",
operator: "===",
left: {
type: "Identifier",
name: "foo"
},
right: {
type: "Identifier",
name: "bar"
}
}

94. export default function(babel) {
var t = babel.types;
return {
visitor: {
// visitor contents
}
};
};

95. export default function(babel) {
var t = babel.types;
return {
visitor: {
BinaryExpression(path) {
// ...
}
}
};
};

96. export default function(babel) {
var t = babel.types;
return {
visitor: {
BinaryExpression(path) {
if (path.node.operator !== "===") {
return;
}
// ...
}
}
};
};

97. export default function(babel) {
var t = babel.types;
return {
visitor: {
BinaryExpression(path) {
if (path.node.operator !== "===") {
return;
}
path.node.left = t.identifier("sebmck");
}
}
};
};

98. sebmck === bar;

99. export default function(babel) {
var t = babel.types;
return {
visitor: {
BinaryExpression(path) {
if (path.node.operator !== "===") {
return;
}
path.node.left = t.identifier("sebmck");
path.node.right = t.identifier("dork");
}
}
};
};

100. sebmck === dork;

101. export default function(babel) {
var t = babel.types;
return {
visitor: {
BinaryExpression(path) {
if (path.node.operator !== "===") {
return;
}
path.node.left = t.identifier("sebmck");
path.node.right = t.identifier("dork");
}
}
};
};

102. Fin