Babel & Webpack & NPM - React Whitepaper Campaign 07

Preamble

This post will explain three terms that are included in the tools you need to know to build a React project:

1. What is Babel?
2. What is Webpack?
3. What is Npm?

Of course, the main focus is on the concept of using these tools, but there are other tools to choose from, such as Npm for Yarn.

What is Babel?

The previous post mentioned that JSX needs to be compiled with tools, and the previous posts in this series also mentioned JavaScript ES6 syntax.

In fact, in some cases, ES6 needs to be compiled, and the Babel suite is used to do that (Compile).

First of all, let's explain that JavaScript is a directly translated programming language, and the browser can execute the program syntax without compiling it.

However, not every browser supports all the latest syntaxes, which is why we use tools like Babel.

Convert the latest syntax, including ES6 and JSX syntax, to older versions of JavaScript in order for the browser to run it.

From a front-end development perspective, Babel is an indispensable tool. Its main function is to convert the latest versions of JavaScript syntax, especially ECMAScript 6 (ES6) syntax, into older versions of JavaScript that the browser can understand and execute.

ES6 introduces many powerful features, such as arrow functions, template strings, and deconstructed values, but due to differences in browser support, we need to use Babel for compilation in order to ensure cross-browser compatibility.

Babel is also needed for compiling when developing React applications that use JSX, a JavaScript syntax extension that describes the structure of React components. It makes it possible to write HTML-like markup in JavaScript, but browsers can't run JSX directly, so Babel is needed to convert it to pure JavaScript.

What is Webpack?

After explaining Babel as a compilation tool, we also need to talk about a modular packaging tool called "Webpack".

As you can imagine, there are many types of files in a large project. Besides JavaScript, there may be different types of files, such as CSS, LESS, SCSS, JSX...and so on.

With all these files scattered in various folders, a consolidation tool is needed to deal with them, which is why Module Bundler such as Webpack was created to consolidate all the files.

The benefits of a modular packaging tool, in addition to allowing us to modularize all our files, can effectively improve performance.

Here also spend more space to explain more detailed, Webpack is a modular packaging tool, its main function is to project a variety of files, including JavaScript, CSS, LESS, SCSS, JSX, etc., integrated into one or more final files. This modular packaging helps to improve development efficiency, especially in large projects, we can split the functionality modularly, and thus realize the convenience of code reuse and testing.

Webpack is more than just a packaging tool, it offers a number of powerful features such as Code Splitting, which allows code to be split into multiple blocks and loaded only when needed to speed up page loading. Meanwhile, Modulize, a core concept in Webpack, allows code to be structured in a way that is easy to maintain and test by splitting large features into smaller files and functions.

In addition, Webpack can optimize performance by packaging files from different modules and locations into a single file, thus reducing browser load time and improving application performance.

Introduction to webpack features

Code Splitting

Split the code into blocks and load it when we need to use a particular block.

Modulize

Modularization is a very important concept, whereby large functions are broken down into smaller files and functions, which can be reused and tested through the modularized smaller files.

Optimize performance

Modules and files scattered in different places are packaged into a single file, which greatly reduces the loading time if a function is used to read it.

Using the latest grammar

Webpack's packaging tools can be integrated with several tools, including Babel, so it is possible to use the latest syntax, including JSX, ES6, etc., by integrating Webpack with Babel.

The advantage of integrating Babel and Webpack is that the latest versions of JavaScript syntax, including ES6 and JSX, can be used and converted into browser-executable versions as they are built. This integration allows developers to take full advantage of the latest technologies while ensuring that applications run reliably in a variety of browsers.

What is Npm?

We've already introduced two tools above, but where can you download these tools or code? For front-end developers, Node.js automatically comes with npm installed, and what is npm?

npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow software packages, and many companies use npm to manage private development.

The full name of npm is Node Package Manager, and we can use the npm cli tool inside Node to install and manage packages.

For example, if you want to use the React suite, all you need to do is enter a command in the terminal, and npm will automatically find the react front-end framework in the Registry and download it to the node_modules folder.

Quote

React White Paper Campaign 08-Babel Webpack Npm

React Vernacular Campaign Series

React JSX - React Vernacular Campaign 06

How React Works - The React Vernacular Campaign 05

JavaScript Higher-Order Function - React Vernacular Campaign 04

JavaScript Async Await - React Vernacular Campaign 03

JavaScript ES6 Object - React Vernacular Campaign 02

JavaScript ES6 – React Vernacular Campaign 01

Complement

Thanks Sam Huang Supplement, readers are welcome to read in Sam’s special area!

對文中提到 babel 的章節做些補充 Babel 本身是個 compiler 沒錯（官網自稱），但如果是指向下相容的部分，或許用 transpiler 比較精確。ES6 有大量語法是語法糖，透過 babel 可以轉成 ES5 語法，「可能」會有比較好的相容性。

Then, direct translation and compilation are more about the relationship between the language and the execution environment, and there is no such thing as a purely direct translation language (in order to take into account both performance and flexibility, JIT and other technologies are usually introduced).