Webpack？Create React App？不，Vite!! ～ ①了解编译、打包、构建的概念～
开篇的介绍
由于构建工具的进化，Web前端开发已经发生了巨大变化。过去需要详细定义配置文件的编译、打包和构建等工作，但最近出现了新的工具，极大地提高了包括这些配置在内的开发流程的效率。然而，由于变得更加方便，实际上我们很难看到构建工具内部正在进行的具体操作。在本文的几次开篇中，我们将从”编译、打包、构建”在JS中的概念开始，通过实际使用webpack、Create React App、Vite来构建React开发环境，以体验其内部实现和技术的强大之处。
议程
①学习理解编译、打包和构建←本次
使用webpack构建的React开发环境
从前，webpack是React开发环境的事实标准。webpack是一个非常强大且灵活的工具，提供了各种功能，如模块捆绑、转译和资源优化。然而，设置复杂，对于初学者来说门槛很高。通过实际构建开发环境，我们能够了解到在开发中我们需要经历的过程。
使用Create React App构建React开发环境。
后来，Facebook推出了“Create React App”，这成为了React初学者和快速原型开发的非常方便的工具。“Create React App”能够自动设置和配置React项目，使得React应用的开发变得简单。通过隐藏配置细节，即使是初学者也能够在短时间内开始React开发。现在就来创建一个环境，亲身体验它的便利之处吧。
使用Vite构建React开发环境及其技术强大之处。
最近出现了一款名为Vite的新型构建工具，其在React开发环境的构建中引起了人们的关注。Vite利用开发服务器上的HMR（Hot Module Replacement）功能，能够实时反映变化。此外，Vite还直接向浏览器提供ES模块，大大减轻了开发时的构建和打包延迟。Vite的配置简单易用，提供了快速的开发体验，因此得到了许多开发者的支持。让我们亲身体验一下这个“爆速”效果。
目标读者
-
- 現状のReact開発環境に不満がある人
-
- そもそもwebpackとかCRAとかViteが何のためにあるのか曖昧な人
- Viteについてちょっと詳しくなりたい人
不做的事情
-
- Viteを用いたプロジェクトの本番運用Tips等、より実践的な内容
- 各種ツールの設定値の詳細の解説
另外，如果有希望快速学习React并且不在意细节的人，可以参考以下文章以获取搭建React 18开发环境的Docker、Vite和Dev Container的存储库链接。
首先，为什么这些工具是必需的呢？
要理解这个，首先你需要牢固理解以下三个动词的意思。
-
- 编译
-
- 打包
- 构建
1-1. 编译
编译是指使用特定的编程语言编写的计算机程序，通过使用其他语言（通常是可由计算机执行的二进制语言）将其转化为相同程序的形式。
在中国文字中，这个翻译常常以更通俗易懂的方式表达为：「将对人类易于理解的源代码，翻译成CPU可解释的机器语言」这种解释很常见，对吧？
如果有人说「给我解释编译」，上述解释没有错，但特别是在处理JavaScript等时，将其解释为「编译」指的是一种不太令人满意的感觉。
“JS不就是人也能看得懂的吗？学习了React和TS就能看懂了吧？”
我认为，如果从更广义的意义上理解“编译”，可以解决这个问题。
将原始程序转换为与系统和应用程序的运行环境（称为运行时）相匹配的程序。
要运行使用Python编写的应用程序，当然需要Python的执行环境了。如果只有Python的执行环境却想要运行PHP，那大多数人肯定会笑着说“不可能呀”。但是JS也是一样的，要运行JS就需要相应的运行时环境。
“但是浏览器感觉有点特别呢，不是吗？”
不，浏览器也是应用程序。而一般来说，所谓浏览器应用程序具有JavaScript的运行环境，因此我们可以在浏览器上运行JS。如果您理解到这一点，就会明白JS中的”编译”指的是在具有JS运行环境（浏览器、Node.js）的环境中运行React（JSX）或者TypeScript（TS）的工作。
1-2. 打包
接下来，我们将进一步了解包裹（bundle）的概念。包裹（bundle）一词的意思是“束缚”。正如其名称所示，它束缚着什么呢？
我们来考虑一下下面这个HTML文件在服务器之间会产生怎样的通信。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数のスクリプトファイル</title>
</head>
<body>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
<script src="script4.js"></script>
</body>
</html>
在这个文件中，我正在加载1至4的脚本文件。简单来说，与服务器的交互如下所示。
基本上，除非在script标记中进行某种指定，否则脚本将按顺序同步加载，这意味着每个脚本都会发送请求到服务器，对于网络性能来说不是很好。因此，打包工具应运而生。打包工具会考虑这些文件的依赖关系，将它们捆绑到一个脚本文件中，以优化网络性能。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バンドルされたスクリプトファイル</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
后来使用的webpack基本上被广泛用作这个捆绑工具。(“pack”也有“束缚”的意思）此外，捆绑意味着在此之前可以享受模块化的好处。在制造一台机器时，如果开发团队没有分工同时进行操作同一区域是很困难的。应该为每个零件建立分工制度。如果应用程序的开发也进行部件化，只要确保充分配合，就可以采取分工制度。
1.3. 建立(构建)
实际上，可以说关于构建，已经完成了70％的类型说明。这是因为构建在先前解释的编译、打包和其他操作的总称中。
通过实际使用webpack进行该任务，我认为可以更详细地了解情况。 下一次，我们将讨论使用webpack构建React开发环境，并查看如何实现这些内容。 如果您感兴趣，请一定点赞或收藏，这将对我们的未来发展有所帮助。 谢谢您的支持。
