创建 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 |
- 通过运行以下命令安装 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> |
更多点击标题