About Compilation

Transcript

1. About Compilation function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function”); } } var A = function A() { _classCallCheck(this, A); }; class A {}
2. First time of compiling C program From source to asm, then to binary code ŏ OHDT /BVWU ULS UGL PRYO  UES PRYE DO FDOOT BSULQWI [RUO HF[HF[ PRYO HD[ UES E\WH6SLOO PRYO HF[HD[ DGGTUVS SRST UES UHWT FƉBHQGSURF VHFWLRQ BB7(;7BBFVWULQJFVWULQJBOLWHUDOV /BVWU#VWU DVFL] KHOORZRUOG?Q LQWPDLQ ^ SULQWI ʼnVRPHWKLQJ?QŊ  UHWXUQ `
3. Gifts from Compilation High level language is easy for human to read and write. Syntax sugar such as PostCSS, JSX, Async to Promise Write once, let Virtual Machine run it everywhere Data structure for communication, like protobuf, thrift, JSON
4. Compile JS Closure Compiler is the old fashion BOSS. but now Babel Features: Syntax, Transform, Miscellaneous
5. Compiler Construction function add(a, b) { return a + b } Front end — Tokenizer Middle end — AST Back end — Code Generator function, add, (, a, b, ), {, return, a, +, b, }… function _a(arg1, arg2) { return arg1 + arg2; };
6. What’s is AST? function square(n) { return n * n; } - FunctionDeclaration: - id: - Identifier: - name: square - params [1] - Identifier - name: n - body: - BlockStatement - body [1] - ReturnStatement - argument - BinaryExpression - operator: * - left - Identifier - name: n - right - Identifier - name: n IXQFWLRQ VTXDUH ^ŏ` UHWXUQ Q Q Q
7. Visitor Pattern To do something like generating code. Define a VISITOR to handle a node while traversing the AST Every node has a PATH representing position in AST You can DO WHATEVER when you enter the node by the visitor function
8. Lets See a Visitor Example Do anything such like replacing in visitor. Same way like in other languages. Such as parsing CSS and transforming it. const yashu = 'some string' var zzw = function() { console.log(zzw) } const Zhihu = 'some string'; var Zhihu = function () { Zhihu.Zhihu(Zhihu); };
9. Thank You If you still don’t really understand how babel works. Just have a look at thejameskyle/babel-handbook : ) gilesliu12@gmail.com learn more: https://github.com/thejameskyle/the-super-tiny-compiler