React 教程：如何使用 webpack 4 和 Babel 构建 React 应用(2018)

React主要用于单页应用程序。

然而，你可以将 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 应用: 建立项目

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

mkdir webpack-react-tutorial && cd webpack-react-tutorial

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

mkdir -p src

通过运行来启用项目：

npm init -y

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

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

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

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

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

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

npm i webpack --save-dev

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

npm i webpack-cli --save-dev

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

"scripts": {
  "build": "webpack --mode production"
}

此时，无需为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

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

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

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

{
  "presets": ["env", "react"]
}

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

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

配置非常简单。

对于每个扩展名为 .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 ：

npm i react react-dom --save-dev

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

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

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

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

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

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

该组件将如下所示：

import React, { Component } from "react";
import ReactDOM from "react-dom";
class FormContainer extends Component {
  constructor() {
    super();
    this.state = {
      title: ""
    };
  }
  render() {
    return (
      <form id="article-form">
      </form>
    );
  }
}
export default FormContainer;

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

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

我们来解决这个问题。

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

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 包：

npm i prop-types --save-dev

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

import React from "react";
import PropTypes from "prop-types";
const Input = ({ label, text, type, id, value, handleChange }) => (
  <div className="form-group">
    <label htmlFor={label}>{text}</label>
    <input
      type={type}
      className="form-control"
      id={id}
      value={value}
      onChange={handleChange}
      required
    />
  </div>
);
Input.propTypes = {
  label: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  handleChange: PropTypes.func.isRequired
};
export default Input;

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

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Input from "../presentational/Input";
class FormContainer extends Component {
  constructor() {
    super();
    this.state = {
      seo_title: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ [event.target.id]: event.target.value });
  }
  render() {
    const { seo_title } = this.state;
    return (
      <form id="article-form">
        <Input
          text="SEO title"
          label="seo_title"
          type="text"
          id="seo_title"
          value={seo_title}
          handleChange={this.handleChange}
        />
      </form>
    );
  }
}
export default FormContainer;

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

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

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

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

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

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。

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

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

然后更新 webpack 配置：

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

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

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

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

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

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

关闭并保存文件。

现在再次运行构建：

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，请先通过以下命令安装包：

npm i webpack-dev-server --save-dev

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

"scripts": {
  "start": "webpack-dev-server --open --mode development",
  "build": "webpack"
}

保存并关闭文件。

关于 npm scripts 可以查看：

• npm scripts : 每个前端开发都应知道的一些使用提示
• 为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts
• 为什么使用 npm Scripts 构建项目

现在，通过运行：

npm start

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

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