babel-intro

Question 1

What is Babel?

Answer 1

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

Transform syntax
Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
Source code transformations (codemods)
And more! (check out these videos for inspiration)

Question 2

What is a Plug-in?

Answer 2

In computing, a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.

Plug-ins depend on the services provided by the host application and do not usually work by themselves. Conversely, the host application operates independently of the plug-ins, making it possible for end-users to add and update plug-ins dynamically without needing to make changes to the host application.

Question 3

What is a Webpack loader?

Answer 3

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Loaders work at the individual file level during or before the bundle is generated.

Question 4

How can you make Babel and Webpack work together?

Answer 4

So a babel loader lets you use plug-ins that can transform the ES6 JS into ES5 before its bundled by webpack. you can npm install babel as a dev dependency