教程:如何从头开始设置React、webpack和Babel 7 (2019)

教程:如何从头开始设置React、webpack和Babel 7 (2019)

原文：Tutorial: How to set up React, webpack, and Babel 7 from scratch (2019)

摘要：

• from scratch 从头开始
• cover 代替某人 （for somebody）

你对create-react-app感到满意。但你有没有想过如何从头开始设置React，webpack和Babel？本教程为你代劳！(This tutorial has got you covered!)

如何设置（set up）React，Webpack和Babel：你将学到什么

在本教程中，您将学习：

• 如何安装和配置webpack
• 如何安装和配置Babel
• 如何安装React
• 如何创建两个React组件（Container / Presentational）
• 如何将生成的bundle文件包含到HTML页面中
• 如何安装和配置webpack dev服务器

享受阅读！

如何设置React，webpack和Babel：设置项目

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

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

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

1. mkdir -p src

通过运行来启用项目：

1. npm init -y

而你很高兴。

如何设置React，webpack和Babel：设置webpack

webpack 它是一个非常强大的工具。虽然您可以在不触及单行配置的情况下完成，但有时仍需要一些自定义设置。迟早你可能想学习webpack。为什么不从现在开始？

学习webpack不仅对于使用React而且对于配置每个前端项目都很有价值。

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

让我们通过运行来安装它：

1. npm i webpack --save-dev

您还需要webpack-cli。将其拉入（Pull it in with:）：

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

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

1. **“**scripts” ：{
2. “build” ：“webpack --mode production”
3. }

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

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

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

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

如何设置React，webpack和Babel：设置Babel

React组件大多用JavaScript ES6编写。ES6是对语言的一个很好的改进，但旧的浏览器无法理解新的语法。以class关键字为例。有状态的React组件被声明为类（我想它迟早不再是这种情况）。因此，为了让ES6在旧版浏览器中运行，我们需要进行某种转换。

这种转变称为转型（transpiling）。Webpack不知道如何将ES6 JavaScript转换为ES5，但它具有这种加载器的（loaders）概念：将它们视为变换器。webpack加载器将某些内容作为输入并生成其他内容作为输出。

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

显然 babel-loader使用Babel。并且Babel必须配置为使用一组预设（preset）：

1. babel preset env用于编译Javascript ES6代码到ES5（请注意babel-preset-es2015现已弃用）
2. babel preset react用于编译JSX和其他东西到Javascript

让我们用以下内容引入依赖关系：

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

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

1. {
2. “presets”** ：[ “@ babel / preset-env” ，“@ babel / preset-react” ]
3. }

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

创建一个名为webpack.config.js的文件，并填写如下：

    module.exports = {
      module: {
         rules: [
           {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: {
               loader: "babel-loader"
             }
           }
         ]
      }
    };
复制代码

配置非常简单。

对于每个带有js或jsx扩展名的文件，Webpack通过babel-loader管理代码，将ES6转换为ES5。

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

让我们来看看下一节！

如何设置React，webpack和Babel：编写React组件

让我们从右脚开始：我们将按照容器/展示原则(Container / Presentational principle.)创建两个React组件。

我建议看看Dan Abramov的容器组件和展示组件，以了解更多信息。简而言之，容器/演示原则是React组件的模式。该容器组件是携带所有的逻辑的组件：用于处理状态变化的功能，内部组件状态等。

相反， 表示 组件仅用于显示预期的标记。表示组件是 普通的JavaScript函数，它 从容器组件接收数据作为道具。

您将在以下示例中看到它们的外观。

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

在编写任何代码（touching any code）之前，让我们通过运行来引入React：

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

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

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

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

• 有自己的state
• 呈现HTML表单(form)

创建组件：

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

该组件将如下所示：

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;
复制代码

该组件此刻不执行任何操作。它只是包装子组件的骨架。我们来解决这个问题。

创建新组件：

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

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

• type
• class
• id
• value
• required

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

由于输入保持自己的状态，我们必须确保React会处理它。HTML输入成为React中的受控组件。

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

通过运行安装包：

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

回到React，HTML输入的表示组件如下所示：

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;
复制代码

此时我们已准备好更新容器组件以包含文本输入：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Input from "../presentational/Input.jsx";
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;
复制代码

现在是时候把事情搞定了( wire things up)！webpack期望入口点为./src/index.js。创建文件并将import指令放入其中以要求容器组件：

import FormContainer from "./js/components/container/FormContainer.jsx";
复制代码

有了这个，我们准备通过运行来创建我们的包：

1. npm run build

给Webpack一秒钟，看看捆绑包来生活！

bundle将被放入

1. ./dist/main.js

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

如何设置React，webpack和Babel：HTML webpack插件

要显示我们的React表单，我们必须告诉Webpack生成一个HTML页面。生成的包将放在脚本标记内。

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

添加依赖项：

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

然后更新webpack配置：

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

接下来将HTML文件重命名为./src/index.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组件将它自己挂钩到id create-article-form中

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

const wrapper = document.getElementById("create-article-form");
wrapper ? ReactDOM.render(<FormContainer />, wrapper) : false;
复制代码

关闭并保存文件。

现在再次运行构建：

1. npm run build

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

使用webpack，不需要在HTML文件中包含您的Javascript：捆绑包将自动注入页面。

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

如何设置React，webpack和Babel：webpack dev服务器

每次更改文件时，您都不希望键入npm run build。

只需3行配置即可启动并运行开发服务器。配置后，webpack将在浏览器中启动您的应用程序。此外，每次在修改后保存文件webpack服务器都会自动刷新浏览器的窗口。

要设置webpack dev服务器，请安装包：

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

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

"scripts": {
  "start": "webpack-dev-server --open --mode development",
  "build": "webpack --mode production"
}
复制代码

保存并关闭文件。

现在，通过运行：

1. npm start

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

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

如何设置React，webpack和Babel：结束

create-react-app是开始新React项目的方法。几乎所有东西都是开箱即用的。但迟早你可能想要扩展或调整一下webpack。

如果您学习如何手动设置React，webpack和Babel，您将能够抓住自己的痒，甚至从零开始配置前端项目。

这些知识对于您不需要完整的SPA但仍希望构建和分发ES6代码的情况也很有用。通过组合webpack和Babel，可以将一堆React组件转换为适合分发的bundle。

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

• 如何安装和配置webpack
• 如何安装和配置Babel
• 如何安装React
• 如何使用Container / Presentational原则创建两个React组件
• 如何将生成的包包含到HTML页面中
• 如何安装和配置webpack dev服务器

到最后，你应该能够从头开始使用React，webpack和Babel。

有关webpack的更多信息，请查看webpack 4教程，从零配置到生产模式。

如果你想挑战自己，请查看我的 React Redux入门教程：它建立在这个webpack / babel基础之上。

感谢阅读并敬请期待！

转载于:https://juejin.im/post/5c74facef265da2da00ebc08