Babel

Question 1

What is babel?

Answer 1

It is a transpiler used to transpile Javascript.

This can be JSX to Vue/React’s Javascript (React.createElement for example)

ES6 to ES5

Question 2

Presets vs plugins

Answer 2

Presets include a grouping of plugins.

Plugins can be to for example transpile JSX to React/Vue Javascript (React.createElement for example)

Question 3

How to use babel?

Answer 3

Install the @babel/core, @babel/cli and then presets or plugins that you want to use and add to .babelrc

Now it can be used in conjunction with Webpack, gulp, rollup or other bundlers.

Question 4

What is tree shaking?

Answer 4

When es6 imports are done, all the functions from a file are included in bundle even if only one function is used. Webpack and other bundlers can be set up to remove the unused functions which are called dead code.

Question 5

Explain babel, bundlers, module aliases, typescript, eslint, prettier, husky and lint-staged setup.

Answer 5

Babel does javascript transpiling based on plugins and presets as well as import aliases, setup using the babel-plugin-module-resolver plugin setup in babelrc file. For example JSX to React.createElement and ES6 to ES5.

Bundlers like webpack OR vite run babel to do transpilation.

Creact React App and others abstract the bundler from you.

Typescript and its bundler can also do the ES6 and JSX transpilation for you without using babel. Setup import aliases, JSX transpilation etc in tsconfig file.

Eslint –init creates eslint config file
Eslint.config.js with default settings. Plugins extend the functionality from only Javascript to react hooks for example of you install and configure it. Add plugin in plugins property and add the standard settings via extends property. Prettier plugin can be installed to lint files with prettier. Add files and folders to ingores property if needed.

Prettier, list files to ignore in .prettierignore and add prettier setup to prettierrc.js file.

Husky runs lint-staged during precommit. Lint-staged fixes files with eslint and prettier when possible and prevents commit when eslint fails.