如何使用 Webpack 5 + Babel 从头开始​​创建 React 应用程序 - DevDojo


创建 React 应用程序的最简单方法是使用create-react-app工具。当你刚开始学习 React 时，这很好用，但它隐藏了很多关于以下方面的细节：

  • 引擎盖下会发生什么
  • 需要什么配置才能使用最新功能
  • 从 ES6 到 ES5 的转换是如何发生的

此外，在处理行业/公司项目时，大多数情况下，您需要使用自定义 webpack 配置而不是 create-react-app。
因此，在本文中，我们将从头开始在 React 中设置 webpack 5 + Babel。
因此，不要浪费太多时间，让我们从配置开始。
  • 创建一个新文件夹react_webpack_setup（您可以随意命名）。

mkdir react_webpack_setup
  • 通过在终端中运行以下命令在文件夹package.json内创建一个文件react_webpack_setup 

cd react_webpack_setup
npm init -y

  • 通过运行以下命令安装 babel 和使用 babel 所需的插件： 

npm install @babel/core@7.15.0 @babel/preset-env@7.15.0 @babel/preset-react@7.14.5

让我们了解这些包的作用。
@babel/core - 它提供了基本的核心 babel 配置
@babel/preset-env - 它允许使用最新的 ES6/ES7/ES8 特性
@babel/preset-react - 它允许使用 JSX 的 React 语法

  • 在public创建一个新文件夹，并在其中创建一个index.html包含以下内容的新文件： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Webpack Setup</title>
</head>
<body></body>
</html>

更多点击标题