Babel & Webpack & NPM - React 07

Babel & Webpack & NPM - React 07

序言

本篇文章将解释构建 React 项目所需的工具中包含的三个术语:

  1. 什么是 Babel?
  2. 什么是 Webpack?
  3. 什么是 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.

什么是 Babel?

上一篇文章提到 JSX 需要使用工具进行编译,本系列文章的前几篇也提到了 JavaScript ES6 语法。

事实上,在某些情况下,ES6 需要编译,而 Babel 套件就是用来完成编译的(Compile)。

首先要说明的是,JavaScript 是一种直接翻译的编程语言,浏览器无需编译即可执行程序语法。

不过,并非每个浏览器都支持所有最新语法,这就是我们使用 Babel 等工具的原因。

将最新语法(包括 ES6 和 JSX 语法)转换为旧版本的 JavaScript,以便浏览器运行。

从前端开发的角度来看,Babel 是一个不可或缺的工具。它的主要功能是将最新版本的 JavaScript 语法(尤其是 ECMAScript 6 (ES6) 语法)转换为浏览器可以理解和执行的旧版 JavaScript。

ES6 引入了许多强大的功能,如箭头函数、模板字符串和解构值,但由于浏览器支持的差异,我们需要使用 Babel 进行编译,以确保跨浏览器兼容性。

在开发使用 JSX(描述 React 组件结构的 JavaScript 语法扩展)的 React 应用程序时,也需要使用 Babel 进行编译。它使在 JavaScript 中编写类似 HTML 的标记成为可能,但浏览器无法直接运行 JSX,因此需要使用 Babel 将其转换为纯 JavaScript。

什么是 Webpack?

在解释了作为编译工具的 Babel 之后,我们还需要谈谈名为 "Webpack "的模块化打包工具。

可以想象,一个大型项目中会有很多类型的文件。除了 JavaScript 之外,可能还有 CSS、LESS、SCSS、JSX......等不同类型的文件。

由于所有这些文件都分散在不同的文件夹中,因此需要一个整合工具来处理它们,这就是为什么要创建 Webpack 这样的模块捆绑程序来整合所有文件的原因。

模块化打包工具的好处除了让我们将所有文件模块化之外,还能有效提高性能。

这里还要花更多篇幅来详细解释一下,Webpack是一个模块化打包工具,它的主要功能是将项目中的各种文件,包括JavaScript、CSS、LESS、SCSS、JSX等,集成到一个或多个最终文件中。这种模块化打包有助于提高开发效率,尤其是在大型项目中,我们可以将功能模块化拆分,从而实现代码重用和测试的便利性。

Webpack 不仅仅是一个打包工具,它还提供了许多强大的功能,例如代码分割(Code Splitting),它可以将代码分割成多个区块,只在需要时加载,从而加快页面加载速度。同时,Webpack 的核心理念之一模块化(Modulize)通过将大型功能拆分成较小的文件和函数,使代码的结构更易于维护和测试。

此外,Webpack 还能将不同模块和位置的文件打包成一个文件,从而优化性能,缩短浏览器加载时间,提高应用程序性能。

webpack 功能介绍

代码分割

将代码分割成代码块,当我们需要使用某个代码块时加载它。

模块化

模块化是一个非常重要的概念,它将大型函数分解为较小的文件和函数,这些文件和函数可以通过模块化的较小文件重复使用和测试。

优化性能

分散在不同地方的模块和文件被打包成一个文件,如果使用函数读取,可以大大缩短加载时间。

使用最新语法

Webpack 的打包工具可以与包括 Babel 在内的多种工具集成,因此通过将 Webpack 与 Babel 集成,可以使用最新的语法,包括 JSX、ES6 等。

集成 Babel 和 Webpack 的优势在于,可以使用最新版本的 JavaScript 语法(包括 ES6 和 JSX),并在构建时将其转换为浏览器可执行版本。这种集成使开发人员能够充分利用最新技术,同时确保应用程序在各种浏览器中可靠运行。

什么是 Npm?

上面我们已经介绍了两种工具,但在哪里可以下载这些工具或代码呢?对于前端开发人员来说,Node.js 会自动安装 npm,什么是 npm?

npm 是世界上最大的软件注册中心。各大洲的开源开发者都使用 npm 共享和借用软件包,许多公司也使用 npm 管理私人开发。

npm 的全称是 Node Package Manager,我们可以在 Node 中使用 npm cli 工具来安装和管理软件包。

例如,如果你想使用 React 套件,只需在终端输入命令,npm 就会自动在注册表中找到 react 前端框架,并将其下载到 node_modules 文件夹中。

引用

React 白皮书活动 08-Babel Webpack Npm

React 白話文運動系列

React JSX – React 06

React 如何工作 - React 05

JavaScript 高级函数 - React 04

JavaScript 异步等待 - React 白话运动 03

JavaScript ES6 Object – React 02

JavaScript ES6 - React 01

補充

谢谢 Sam Huang 欢迎读者访问 Sam 栏目了解更多信息!

对于文章中提到的 babel,Babel 本身是一个编译器(正如官方网站所称),但如果你是指缺点兼容性部分,使用转译器可能更准确。

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).

zh_CN简体中文