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

21-08-30 banq

创建 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>

更多点击标题

 

猜你喜欢