您的位置: 首页  >  文章  >  如何使用 webpack 4 和 Babel 构建 React 应用

如何使用 webpack 4 和 Babel 构建 React 应用

分类: 文章 • 2025-03-12 19:34:15

React主要用于单页应用程序。http://www.css88.com/archives/9427

 

然而，你可以将 React 库集成到任何使用 webpack 和 Babel 构建的网站中。

如何使用 webpack 4 和 Babel 构建 React 应用: 你将学习什么

  1. 如何安装和配置 webpack
  2. 如何安装和配置 Babel
  3. 如何安装 React
  4. 如何按照容器(Container)组件/展示(Presentational)组件的原则创建两个React组件
  5. 如何将生成的包包含到HTML页面中
  6. 如何安装和配置 Webpack Dev Server

React 不仅限于 SPA 应用。 可以将库集成到任何现有网站中。

可以通过 CDN 或 模块包 引入React。

对于我的大多数项目，我都使用 Webpack：将 React 和 webpack 结合起来很容易。

您也可以这样做并在几分钟内的拥有一个有效的 webpack 4 – React 环境：这里我为你准备了一个简短的教程。

如何使用 webpack 4 和 Babel 构建 React 应用: 建立项目

首先为项目创建一个目录：

 

CommandLine 代码:

  1. mkdir webpack-react-tutorial && cd webpack-react-tutorial

创建一个用于保存代码的最小目录结构：

 

CommandLine 代码:

  1. mkdir -p src

通过运行来启用项目：

 

CommandLine 代码:

  1. npm init -y

就是这么简单，项目建立完成！

如何使用 webpack 4 和 Babel 构建 React 应用: 设置 webpack

webpack是现代Web开发的支柱之一。 这是一个非常强大的工具。

了解如何使用 webpack 是使用 React 的基础。

webpack 提取原始的 React 组件，用于生成（几乎）每个浏览器都能运行的 JavaScript 代码。

让我们通过运行以下命令来安装它：

 

CommandLine 代码:

  1. npm i webpack --save-dev

您还需要 webpack-cli 。 将其拉入：

 

CommandLine 代码:

  1. npm i webpack-cli --save-dev

接下来在 package.json 中添加 webpack 命令：

 

package.json 代码:

  1. "scripts": {
  2. "build": "webpack --mode production"
  3. }

此时，无需为webpack定义配置文件。

较旧的webpack版本会自动查找配置文件。

从版本4开始不再是这种情况：你可以直接开始开发。

在下一节中，我们将安装和配置 Babel 以便转换我们的代码。

如何使用 webpack 4 和 Babel 构建 React 应用: 设置 Babel

React components(组件) 大多是用 JavaScript ES6 编写的。

由于浏览器无法理解 React 组件，因此需要进行某种转换。

Webpack 不知道如何进行转换，但它具有 loaders(加载器) 的概念：将它们视为转换器。

Webpack loaders(加载器) 将某些内容作为输入并生成其他内容作为输出。

babel-loader 是 Webpack 加载器，负责接收 ES6 代码并使其可以让所选择的浏览器理解。

很明显 babel-loader 使用 Babel。 并且 Babel 必须配置为使用一组预设：

abel-preset-env 用于将 JavaScript ES6 代码编译为 ES5（请注意，babel-preset-es2015现已弃用）
babel-preset-react 用于将 JSX 和其他东西编译到 JavaScript

让我们用以下命令引入依赖关系：

 

CommandLine 代码:

  1. npm i babel-loader babel-core babel-preset-env babel-preset-react --save-dev

别忘了配置Babel！在项目文件夹中创建一个名为 .babelrc 的新文件：

 

.babelrc 代码:

  1. {
  2. "presets": ["env", "react"]
  3. }

此时我们已准备好定义最小的webpack配置。

创建一个名为 webpack.config.js 的文件，写入以下内容：

 

webpack.config.js 代码:

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.js$/,
  6. exclude: /node_modules/,
  7. use: {
  8. loader: "babel-loader"
  9. }
  10. }
  11. ]
  12. }
  13. };

配置非常简单。

对于每个扩展名为 .js 的文件，Webpack 都会通过 babel-loader 来管理代码，将 ES6 转换为 ES5 。

有了这个，我们就可以编写我们的 React 组件了。

让我们来看看下一节。

如何使用 webpack 4 和 Babel 构建 React 应用: 编写 React 组件

如果你对 React 不熟悉，你可以查看 React 教程：2018年学习 React.js 的综合指南 这篇文章，作为你最简入门，这篇文章用实例介绍了 React 中最重要的特性。

我喜欢按照容器(Container)组件/展示(Presentational)组件的原则编写我的 React 组件。

我建议看看 Dan Abramov 的 容器组件 和 聪明和愚蠢的组件 ，以了解更多信息。

简而言之，容器组件/展示组件原则是 React 组件的模式。

容器组件是承载所有逻辑的容器组件：用于处理 state(状态) 更改，内部组件 state(状态) 等的功能。

相反，展示组件 仅用于 显示 所需的 HTML 标记。展示组件通常是 普通的 箭头函数，并从容器组件接收数据作为 props(属性) 。

您将在以下示例中看到它们的样子。

对于这篇文章的范围，我想构建一个带有单个文本输入的超级简单的 React 表单。

在接触任何代码之前，让我们通过运行以下命令来引入 React ：

 

CommandLine 代码:

  1. npm i react react-dom --save-dev

然后创建一个用于组织组件的最小目录结构：

 

CommandLine 代码:

  1. mkdir -p src/js/components/{container,presentational}

接下来让我们创建一个容器组件：

  • 有自己的 state(状态)
  • 渲染 HTML 表单

在 src/js/components/container/ 中创建组件：

 

CommandLine 代码:

  1. touch src/js/components/container/FormContainer.js

该组件将如下所示：

 

FormContainer.js 代码:

  1. import React, { Component } from "react";
  2. import ReactDOM from "react-dom";
  3. class FormContainer extends Component {
  4. constructor() {
  5. super();
  6. this.state = {
  7. title: ""
  8. };
  9. }
  10. render() {
  11. return (
  12. <form id="article-form">
  13. </form>
  14. );
  15. }
  16. }
  17. export default FormContainer;

该组件此刻没什么内容和交互。 它只是一个包装子组件的骨架。

事实上，如果一个容器组件 不包含 展示子组件的话，那么这个容器组件几乎是无用的。

我们来解决这个问题。

在 src/js/components/presentational/ 中创建一个新组件：

 

CommandLine 代码:

  1. touch src/js/components/presentational/Input.js

我们的第一个表示性的 React 组件将是 文本输入框。我们知道 HTML input 具有以下属性：

  • type
  • class
  • id
  • value
  • required

所有这些都将成为容器组件传递给其展示子组件的 props(属性) 。

由于 Input 保持自己的 state(状态) ，我们必须确保 React 会处理它。 HTML input 成为一个 React中的受控组件。

说到 props(属性) ，最好使用 Prop Types 记录您的 React 组件。

通过运行以下命令来安装 prop-types 包：

 

CommandLine 代码:

  1. npm i prop-types --save-dev

回到 React ，HTML Input 展示组件如下所示：

 

Input.js 代码:

  1. import React from "react";
  2. import PropTypes from "prop-types";
  3. const Input = ({ label, text, type, id, value, handleChange }) => (
  4. <div className="form-group">
  5. <label htmlFor={label}>{text}</label>
  6. <input
  7. type={type}
  8. className="form-control"
  9. id={id}
  10. value={value}
  11. onChange={handleChange}
  12. required
  13. />
  14. </div>
  15. );
  16. Input.propTypes = {
  17. label: PropTypes.string.isRequired,
  18. text: PropTypes.string.isRequired,
  19. type: PropTypes.string.isRequired,
  20. id: PropTypes.string.isRequired,
  21. value: PropTypes.string.isRequired,
  22. handleChange: PropTypes.func.isRequired
  23. };
  24. export default Input;

此时，我们就可以更新容器组件，以包含文本输入框，即 Input 展示组件：

 

FormContainer.js 代码:

  1. import React, { Component } from "react";
  2. import ReactDOM from "react-dom";
  3. import Input from "../presentational/Input";
  4. class FormContainer extends Component {
  5. constructor() {
  6. super();
  7. this.state = {
  8. seo_title: ""
  9. };
  10. this.handleChange = this.handleChange.bind(this);
  11. }
  12. handleChange(event) {
  13. this.setState({ [event.target.id]: event.target.value });
  14. }
  15. render() {
  16. const { seo_title } = this.state;
  17. return (
  18. <form id="article-form">
  19. <Input
  20. text="SEO title"
  21. label="seo_title"
  22. type="text"
  23. id="seo_title"
  24. value={seo_title}
  25. handleChange={this.handleChange}
  26. />
  27. </form>
  28. );
  29. }
  30. }
  31. export default FormContainer;

是时候把所有这些东西联系起来了。

Webpack 期望 entry point(入口点) 为 ./src/index.js

创建 ./src/index.js ，并使用 import 指令将 容器组件 引入其中：

 

index.js 代码:

  1. import FormContainer from "./js/components/container/FormContainer";

有了这个，我们就可以通过运行以下命令来创建我们的包了：

 

CommandLine 代码:

  1. npm run build

给 Webpack 一秒钟，看看 bundle(包) 就生成了！

bundle(包) 将被放入 ./dist/main.js 。

现在让我们通过将 bundle(包) 包含在 HTML 页面中来实现我们的 React 实验。

如何使用 webpack 4 和 Babel 构建 React 应用: HTML webpack 插件（html-webpack-plugin ， html-loader）

要显示我们的 React 表单，我们必须告诉 Webpack 生成一个 HTML 页面。 生成的 bundle(包) 将放在 <script> </script> 标签内。

Webpack 需要两个额外的组件来处理HTML：html-webpack-plugin 和 html-loader。

通过以下命令添加依赖项：

 

CommandLine 代码:

  1. npm i html-webpack-plugin html-loader --save-dev

然后更新 webpack 配置：

 

webpack.config.js 代码:

  1. const HtmlWebPackPlugin = require("html-webpack-plugin");
  2. module.exports = {
  3. module: {
  4. rules: [
  5. {
  6. test: /\.js$/,
  7. exclude: /node_modules/,
  8. use: {
  9. loader: "babel-loader"
  10. }
  11. },
  12. {
  13. test: /\.html$/,
  14. use: [
  15. {
  16. loader: "html-loader"
  17. }
  18. ]
  19. }
  20. ]
  21. },
  22. plugins: [
  23. new HtmlWebPackPlugin({
  24. template: "./src/index.html",
  25. filename: "./index.html"
  26. })
  27. ]
  28. };

接下来在 ./src/index.html 中创建一个 HTML 文件（可以随意使用你喜欢的CSS库）：

 

index.html 代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >
  6. <title>How to set up React, Webpack, and Babel</title>
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="row mt-5">
  11. <div class="col-md-4 offset-md-1">
  12. <p>Create a new article</p>
  13. <div id="create-article-form">
  14. <!-- form -->
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. </body>
  20. </html>

还剩下最后一件事！ 我们必须告诉我们的 React 组件将自己渲染到 <div id="create-article-form"></div> 标签中。

打开 ./src/js/components/container/FormContainer.js 并在文件底部添加以下内容：

 

FormContainer.js 代码:

  1. const wrapper = document.getElementById("create-article-form");
  2. wrapper ? ReactDOM.render(, wrapper) : false;

关闭并保存文件。

现在再次运行构建：

 

CommandLine 代码:

  1. npm run build

并查看 ./dist 文件夹。 您应该看到生成的 HTML 。

使用 webpack ，无需在 HTML 文件中包含您的 Javascript ： bundle(包) 将自动注入页面。

在浏览器中打开 ./dist/index.html：您应该可以看到 React 表单了 。

如何使用 webpack 4 和 Babel 构建 React 应用: webpack dev server

每次更改文件时，您应该不希望每次都需要键入 npm run build 来重新构建项目。

只需 3 行配置即可启动并运行开发服务器。

配置后，webpack 将在浏览器中启动您的应用程序。

此外，每次在修改后保存文件时，webpack dev server 都会自动刷新浏览器的窗口。

要设置 webpack dev server，请先通过以下命令安装包：

 

CommandLine 代码:

  1. npm i webpack-dev-server --save-dev

打开 package.json 添加启动脚本：

 

package.json 代码:

  1. "scripts": {
  2. "start": "webpack-dev-server --open --mode development",
  3. "build": "webpack"
  4. }

保存并关闭文件。

关于 npm scripts 可以查看：

现在，通过运行：

 

CommandLine 代码:

  1. npm start

你应该能够看到 webpack 在浏览器中启动你的应用程序。

如何使用 webpack 4 和 Babel 构建 React 应用

Webpack Dev Server将在每次修改文件时自动刷新窗口！

如何使用 webpack 4 和 Babel 构建 React 应用: 小结

React主要用于创建单页应用程序。 但它也可以适用于任何网站。

通过组合 webpack 和 Babel ，可以将一堆 React 组件转换为适合分发的 bundle（包）。

在上面的指南中我们看到：

  1. 如何安装和配置 webpack
  2. 如何安装和配置Babel
  3. 如何安装React
  4. 如何按照容器(Container)组件/展示(Presentational)组件的原则创建两个React组件
  5. 如何将生成的包包含到HTML页面中
  6. 如何安装和配置 Webpack Dev Server

到最后，你应该能够在项目一开始的时候就使用 React，webpack 和 Babel。

有关 webpack 的更多信息，请查看 webpack 4 官方文档。
有关 React 的更多信息，请查看 React 官方文档。

原文链接：https://www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_Webpack_and_Babel_what_you_will_learn

相关推荐