BabelJS - James Kyle at Modern Web UI
-
Upload
modernweb -
Category
Technology
-
view
360 -
download
2
Transcript of BabelJS - James Kyle at Modern Web UI
![Page 1: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/1.jpg)
@thejameskyle
![Page 4: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/4.jpg)
![Page 5: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/5.jpg)
Babel Sucks
![Page 6: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/6.jpg)
B S
![Page 7: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/7.jpg)
What is Babel?
![Page 8: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/8.jpg)
A general purpose JavaScript compiler.
![Page 9: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/9.jpg)
code()
01010101010100
High Level
Low Level
![Page 10: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/10.jpg)
Static Analysis
![Page 11: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/11.jpg)
Abstract Syntax Tree (AST)
![Page 12: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/12.jpg)
function square(n) { return n * n;}
![Page 13: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/13.jpg)
- FunctionDeclaration: - id: - Identifier: - name: square - params [1] - Identifier - name: n - body:
![Page 14: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/14.jpg)
{ type: "FunctionDeclaration", id: { type: "Identifier", name: "square" }, params: [{ type: "Identifier", name: "n" }], body: { type: "BlockStatement", body: [{ type: "ReturnStatement", argument: { type: "BinaryExpression", operator: "*", left: { type: "Identifier",
![Page 15: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/15.jpg)
{ type: "FunctionDeclaration", id: {...}, params: [...], body: {...}}
{ type: "Identifier", name: ...}
{ type: "BinaryExpression", operator: ..., left: {...}, right: {...}}
![Page 16: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/16.jpg)
interface Node { type: string;}
![Page 17: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/17.jpg)
{ type: "FunctionDeclaration", id: {...}, params: [...], body: {...}}
![Page 18: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/18.jpg)
Parsing
Transforming
Generating
![Page 19: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/19.jpg)
Parsing:
1. Lexical Analysis
2. Syntactic Analysis
![Page 20: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/20.jpg)
Lexical Analysis
![Page 21: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/21.jpg)
n * n;
![Page 22: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/22.jpg)
[ { type: { ... }, value: "n" }, { type: { ... }, value: "*" }, { type: { ... }, value: "n" }]
![Page 23: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/23.jpg)
{ type: { label: 'name', keyword: undefined, beforeExpr: false, startsExpr: true, rightAssociative: false, isLoop: false, isAssign: false, prefix: false, postfix: false, binop: null, updateContext: null }, ...}
![Page 24: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/24.jpg)
Syntactic Analysis
![Page 25: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/25.jpg)
Parsing
Transforming
Generating
![Page 26: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/26.jpg)
Parsing
Transformating
Generating
![Page 27: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/27.jpg)
Traversal
![Page 28: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/28.jpg)
{ type: "FunctionDeclaration", id: {...}, params: [...], body: {...}}
![Page 29: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/29.jpg)
{ type: "FunctionDeclaration", id: { type: "Identifier", name: "square" }, params: [...], body: {...}}
![Page 30: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/30.jpg)
{ type: "FunctionDeclaration", id: {...}, params: [{ type: "Identifier", name: "n" }], body: {...}}
![Page 31: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/31.jpg)
{ type: "FunctionDeclaration", id: {...}, params: [], body: { type: "BlockStatement", body: [...] }}
![Page 32: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/32.jpg)
{ type: "BlockStatement", body: [{ type: "ReturnStatement", argument: {...} }]}
![Page 33: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/33.jpg)
{ type: "ReturnStatement", argument: { type: "BinaryExpression", operator: "*", left: {...}, right: {...} }}
![Page 34: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/34.jpg)
{ type: "BinaryExpression", operator: "*", left: {...}, right: {...}}
![Page 35: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/35.jpg)
{ type: "BinaryExpression", operator: "*", left: { type: "Identifier", name: "n" }, right: {...}}
![Page 36: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/36.jpg)
{ type: "BinaryExpression", operator: "*", left: {...}, right: { type: "Identifier", name: "n" }}
![Page 37: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/37.jpg)
Visitors
![Page 38: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/38.jpg)
const MyVisitor = { Identifier() { console.log("Called!"); }};
![Page 39: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/39.jpg)
function square(n) { return n * n;}
![Page 40: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/40.jpg)
function square(n) { return n * n;}
![Page 41: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/41.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 42: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/42.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 43: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/43.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 44: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/44.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 45: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/45.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 46: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/46.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 47: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/47.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 48: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/48.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 49: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/49.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 50: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/50.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 51: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/51.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 52: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/52.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 53: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/53.jpg)
- FunctionDeclaration - Identifier (id) - Identifier (params[0]) - BlockStatement (body) - ReturnStatement (body) - BinaryExpression (argument) - Identifier (left) - Identifier (right)
![Page 54: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/54.jpg)
const MyVisitor = { Identifier: { enter() { console.log("Entered!"); }, exit() { console.log("Exited!"); } }};
![Page 55: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/55.jpg)
Paths
![Page 56: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/56.jpg)
{ type: "FunctionDeclaration", id: { type: "Identifier", name: "square" }, ...}
![Page 57: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/57.jpg)
{ parent: { type: "FunctionDeclaration", id: {...}, .... }, node: { type: "Identifier", name: "square" }}
![Page 58: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/58.jpg)
{ parent: { type: "FunctionDeclaration", id: {...}, .... }, node: { type: "Identifier", name: "square" }}
![Page 59: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/59.jpg)
Paths in visitors
![Page 60: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/60.jpg)
const MyVisitor = { Identifier(path) { console.log("Visiting: " + path.node.name); }};
![Page 61: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/61.jpg)
Scopes
![Page 62: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/62.jpg)
// global scope
function scopeOne() { // scope 1
function scopeTwo() { // scope 2 }}
![Page 63: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/63.jpg)
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"; }}
![Page 64: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/64.jpg)
function scopeOne() { var one = "I am in scope one";
function scopeTwo() { one = "I updating a ref in scope one"; }}
![Page 65: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/65.jpg)
function scopeOne() { var one = "I am in scope one";
function scopeTwo() { var one = "I am creating a new `one`"; }}
![Page 66: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/66.jpg)
Scopes
![Page 67: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/67.jpg)
{ path: path, block: path.node, parentBlock: path.parent, parent: parentScope, bindings: [...]}
![Page 68: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/68.jpg)
Bindings
![Page 69: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/69.jpg)
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 }}
![Page 70: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/70.jpg)
{ identifier: node, scope: scope, path: path, kind: 'var',
referenced: true, references: 3, referencePaths: [path, path, path],
constant: false, constantViolations: [path]}
![Page 71: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/71.jpg)
The many modules of Babel
![Page 72: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/72.jpg)
Babel Types
![Page 73: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/73.jpg)
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"]});
![Page 74: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/74.jpg)
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"]});
![Page 75: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/75.jpg)
t.binaryExpression( "*", t.identifier("a"), t.identifier("b"));
![Page 76: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/76.jpg)
{ type: "BinaryExpression", operator: "*", left: { type: "Identifier", name: "a" }, right: { type: "Identifier", name: "b" }}
![Page 77: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/77.jpg)
a * b
![Page 78: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/78.jpg)
Babel Types
![Page 79: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/79.jpg)
That's Babel.
![Page 80: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/80.jpg)
Babel Sucks
![Page 81: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/81.jpg)
Babel doesn't do anything in the least efficient way possible.
![Page 82: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/82.jpg)
function babel(code) { return code;}
![Page 83: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/83.jpg)
function babel(code) { return code}
![Page 84: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/84.jpg)
const babel = code => code
![Page 85: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/85.jpg)
Plugins!
![Page 86: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/86.jpg)
Babel is only as good as the ecosystem built around it
![Page 87: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/87.jpg)
You.
![Page 88: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/88.jpg)
Writing your first Babel Plugin.
![Page 89: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/89.jpg)
export default function(babel) { // plugin contents}
![Page 90: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/90.jpg)
export default function(babel) { var t = babel.types; // plugin contents};
![Page 91: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/91.jpg)
export default function(babel) { var t = babel.types; return { visitor: { // visitor contents } };};
![Page 92: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/92.jpg)
foo === bar;
![Page 93: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/93.jpg)
{ type: "BinaryExpression", operator: "===", left: { type: "Identifier", name: "foo" }, right: { type: "Identifier", name: "bar" }}
![Page 94: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/94.jpg)
export default function(babel) { var t = babel.types; return { visitor: { // visitor contents } };};
![Page 95: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/95.jpg)
export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { // ... } } };};
![Page 96: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/96.jpg)
export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { if (path.node.operator !== "===") { return; } // ... } } };};
![Page 97: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/97.jpg)
export default function(babel) { var t = babel.types; return { visitor: { BinaryExpression(path) { if (path.node.operator !== "===") { return; } path.node.left = t.identifier("sebmck"); } } };};
![Page 98: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/98.jpg)
sebmck === bar;
![Page 99: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/99.jpg)
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"); } } };};
![Page 100: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/100.jpg)
sebmck === dork;
![Page 101: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/101.jpg)
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"); } } };};
![Page 102: BabelJS - James Kyle at Modern Web UI](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f27bc71a28abf36d8b45cd/html5/thumbnails/102.jpg)
Fin