您的位置:首页 » 分类: JavaScript & ES2015 (ES6) & React & webpack & 开源项目 » 文章: React 教程:如何使用 webpack 4 和 Babel 构建 React 应用(2018)

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-pluginhtml-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 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 官方文档 。如果你是新手,建议查看:Webpack 4 教程:从零配置到生产发布(2018)
有关 React 的更多信息,请查看 React 官方文档

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

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

1 条评论 - 关于 “React 教程:如何使用 webpack 4 和 Babel 构建 React 应用(2018)

发表评论

电子邮件地址不会被公开。 必填项已用*标注