at least two correct ways of pronouncing Babel. The ﬁrst is British English, the second American English. Make of that what you wish. I'll probably use both during the course of this talk. Links: http://dictionary.cambridge.org/pronunciation/english/babel
This creates a new AST. To do so we need to traverse the tree, looking for the nodes we're interested in. ArrowFunctionExpressions for instance. The latest preset creates a new AST that only contains ES5-compatible object.
they're deﬁnitely your problem. They may stop being maintained, in which case your code may stop working. You'll need to consider the cost of adopting a plugin, or moving away from one. You'll have more dependencies to install and keep up to date. Certain plugins may interfere with your linter setup, requiring additional conﬁguration. With that out of the way, let's move on to some cool plugins you can use today.
Babel plugin. But there are also plugins which can improve performance of your React code: transform-react-constant-elements ensures static elements are not unnecessarily recreated transform-react-inline-elements changes how elements are created to improve performance
you import modules using a glob pattern. This is useful if you need to import multiple modules without needing explicit references to them. Link: https://github.com/novemberborn/babel-plugin-import-glob
to write plugins, including the APIs you need to use to transform the AST. The Babel REPL shows you how code is transformed using the ofﬁcial Babel plugins. Use this to get a feel for what Babel does to your code. AST Explorer lets you explore the AST for your source code. Be sure to select babylon6 as the parser.
not the generated code. Generated code can change for reasons unrelated to your plugin's functioning. I've messed this up before. You could transform the code and then execute it using the VM module. Then write tests against the resulting value.
strings. It'll be clear that the output will be a string, and we can do maths using identiﬁers. If you look at the AST you'll see it's a BinaryExpression, with the right hand side being the clinking beer mugs emoji string, and the left being a TemplateLiteral. The literal contains just one BinaryExpression, which is the emoji maths. We need to ﬁnd binary expressions inside template literals where either side is an emoji identiﬁer, and there is some mathematical operator. Link: http://astexplorer.net/#/UgrB4UMDq5