使用 Webpack 和 Babel 设置 React 应用程序

本文是两篇系列文章的一部分，该系列文章介绍了如何使用 Webpack 和 Babel 从零开始配置 React 应用，并最终为其添加 TypeScript。要阅读本系列的第二篇文章，请点击下面的链接。

使用 Webpack、Babel 和 TypeScript 设置 React 应用程序

如果你想创建一个新的 React 应用，或者想将React添加到现有项目中，但又不想使用 create-react-app 工具，那么你来对地方了。今天我将指导你如何使用Webpack和Babel从零开始搭建一个 React 应用。

要使用 Webpack 和 Babel 创建一个新的 React 应用，我们首先需要安装 Node.js。您可以通过此链接为您的机器安装最新版本。

安装 Node JS 后，我们可以开始以下步骤。

创建新文件夹。你可以使用以下命令来创建新文件夹。创建文件夹后，使用cd命令导航到该文件夹。
```
mkdir <folder_name>

cd <folder_name>
```

当您在文件夹中时，使用下面给出的命令创建一个新的 package.json 文件。

npm init -y

上面的命令会生成一个 package.json 文件，无需任何提示。你也可以使用下面的命令手动提供所有信息来生成该文件。

npm init

它在创建时要求提供以下几个详细信息。

a. package name (name for your app)
b. version (1.0.0 - initially)
c. description (a small description for your app)
d. entry point (entry point for the module)
e. test (any test command)
f. author (author of the app)
g. git (git repository url and type)
h. license (MIT/ ISC etc.)

创建 package.json 文件后，继续创建一个src文件夹。这是我们代码所在的位置。

现在使用touch命令生成这两个文件：
```
touch index.html - (the page which is rendered and visible to the user)

touch index.js - (the entry point for our application)
```

使用以下代码设置一个 index.html 文件并保存。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="theme-color" content="#000000" />
        <title>React with Webpack and Babel</title>
    </head>
    <body>
        <noscript>
            You need to enable JavaScript to run this app.
        </noscript>
        <div id="root">
            <!-- This div is where our app will run -->
        </div>
    </body>
</html>

注意：该文件应如下面的屏幕截图所示。

暂时保留index.js 。安装所有必需的软件包后，我们将对其进行配置。

现在让我们将 Webpack 添加到我们的项目中。

您可以通过 npm 或 yarn 安装这些包，无论您喜欢哪种方式。
```
npm install webpack webpack-cli webpack-dev-server --save-dev
```
webpack允许我们配置我们的应用程序，webpack-cli帮助我们在命令行上使用 webpack，webpack-dev-server用于实时重新加载网页，以便我们无需手动刷新页面即可查看我们的更改。

一旦安装了这些软件包，它们应该在devDependencies部分中可见，如下所示。

附言：您可能需要从软件包版本号中删除插入符号 (ˆ)，因为我们不确定新的更新是否会带来重大更改。手动更新版本始终是更好的选择。
现在该再次添加新文件了。像上面一样使用 touch 命令添加webpack.config.js。它应该安装在根目录中。
```
touch webpack.config.js
```
由于我们需要在应用中使用路径，所以我们先将path包安装为devDependency 。我们不想将 index.js 文件注入到 HTML 文件中。因此，安装html-webpack-plugin插件来帮助我们自动完成这项工作。
```
npm install path html-webpack-plugin --save-dev
```
这就是你的 package.json 目前的样子。
将index.js的内容替换为以下内容。
```
 (function helloWorld() {
      console.log('Hello World');
 }());
```
完成后，让我们运行 webpack 看看会发生什么。使用下面提供的命令。
```
 npm run webpack
```
Webpack会自动获取src/index.js文件，进行编译并将其输出到dist/main.js
并压缩代码。

npm run webpack 输出

main.js 已添加到 dist 文件夹

我们现在可以继续运行npm start命令来运行该应用程序。
```
 npm start
```
npm start 输出

导航到localhost:8080您应该能够看到如下所示的屏幕。

localhost 在默认浏览器上启动

要停止服务器，在 Windows 上按Ctrl + C ，在 Mac 上按 Command + C。
复制下面的代码并将其粘贴到webpack.config.js文件中。
```
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
    mode: process.env.NODE_ENV || "development",
    resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
    devServer: { contentBase: path.join(__dirname, "src") },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src", "index.html"),
        }),
    ],
};
```
webpack.config.js

让我们看一下文件中的各个组成部分。

a. entry 和 output：告诉我们的服务器需要编译什么以及从哪里开始。同时告诉服务器编译后的版本应该输出到哪里。

b. mode：这是我们输出的模式，目前设置为“开发”。当应用构建为生产环境时，应更改为“生产”。

c. resolve：这样我们就可以从src文件夹以相对路径而不是绝对路径导入任何内容，对于 node_modules 也是如此。

d. devServer：这告诉 webpack-dev-server 需要提供哪些文件。src 文件夹中的所有内容都需要在浏览器中提供（输出）。

e. plugins：在这里我们设置应用中需要的插件。目前我们只需要 html-webpack-plugin 插件，它会告诉服务器应该将 index.bundle.js 注入（或者，如果你愿意，也可以直接添加）到我们的 index.html 文件中。

如果我们现在运行之前的命令，我们会看到一些差异。
```
 npm run webpack
```
npm run webpack 输出

包含 index.build.js 和 index.html 的构建文件夹

如果您现在使用npm start命令启动应用程序，您将在浏览器上看到一个空白屏幕，没有任何内容。
```
 npm start
```
打开浏览器的开发者工具，你应该能够在 Elements 选项卡中看到index.html文件的完整代码。检查 Console 选项卡，可以看到输出了 Hello World。webpack-dev-server 从src文件夹中获取了所有内容，并将其输出到我们的浏览器中。
我们已经配置好了应用，从src文件夹构建所有内容并将其输出到浏览器。现在是时候添加 React 并让它更上一层楼了。

按照以下步骤将 React 和 Babel 添加到项目中。运行以下命令将
react和react-dom添加到项目中。

添加react和react-dom作为正常依赖项。
```
  npm install react react-dom --save
```
在开发过程中，如果我们在 JS 文件中添加 React 代码，Webpack会报错。它不知道如何在bundle.js文件中编译 React。

修改index.js文件如下：
```
import React from 'react';
import ReactDOM from 'react-dom';

const HelloWorld = () => {
    return (
        <h1>
            Hello World
        </h1>
    );
}

ReactDOM.render(<HelloWorld />, document.getElementById("root"));
```
我们现在启动服务器并查看渲染的内容。
```
npm start
```
webpack 错误，因为没有**适合 react 的加载器**
这时Babel就能帮上忙了。Babel 会告诉Webpack如何编译我们的 React 代码。

让我们将一堆 Babel 包作为devDependencies添加到我们的应用程序中。
```
  npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader
```
关于这些包的一些两点提示。

a. @babel /core：用于将ES6及以上版本编译为ES5。

b. @babel /preset-env：根据您想要支持的浏览器矩阵确定要使用哪些转换或插件以及 polyfill（即，它在原本不支持它的旧版浏览器上提供现代功能）。

c. @babel /preset-react：将 React 代码编译为 ES5 代码。

d. babel-loader：一个 Webpack 助手，它使用 Babel 转换你的 JavaScript 依赖项（即将 import 语句转换为 require 语句）
您可能需要向项目添加一些样式，以及能够在网页上显示图像。

继续将这几个包添加为devDependencies。（如果您知道不会使用 SCSS 文件，请删除 sass-loader 和 node-sass 。）
```
 npm install style-loader css-loader sass-loader node-sass image-webpack-loader --save-dev 
```
a. style-loader：将向 DOM 添加样式（在 HTML 文件中注入样式标签）。

b. css-loader：让我们在项目中导入 CSS 文件。

c. sass-loader：让我们在项目中导入 SCSS 文件。

d. node-sass：将 SCSS 文件编译为普通 CSS 文件。

例如，image-webpack-loader：让我们在项目中加载图像。

接下来要做的是为 Babel 添加一个配置文件。为此，我们需要创建一个名为.babelrc的文件，用于配置 Babel。请在根目录中创建此文件。

touch .babelrc

添加这些行让babel-loader知道使用什么来编译代码。

{
    "presets": [
        "@babel/env",
        "@babel/react"
    ]
}

完成这些步骤后，我们需要在项目中添加一些内容，以便导入各种文件，例如图像。我们还需要添加一个插件，以便处理类等功能。让我们在类中添加类属性。简而言之，这将帮助我们进行面向对象编程。

npm install file-loader @babel/plugin-proposal-class-properties --save-dev

完成后，我们需要在 webpack.config.js 中做一些修改，以便 Webpack 现在可以使用 Babel。我们还将配置 Webpack 监听样式文件，并将 require 语句改为 import 样式文件。

将webpack.config.js更改为以下代码：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
    mode: process.env.NODE_ENV || "development",
    resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
    devServer: { contentBase: path.join(__dirname, "src") },
    module: {
        rules: [
            { 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                use: ["babel-loader"] 
            },
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader"],
            },
            { 
                test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                use: ["file-loader"] 
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src", "index.html"),
        }),
    ],
};

您的webpack.config.js现在应该看起来像这样。

将项目中的 package.json 与下图进行匹配。

我们还需要将@babel /plugin-proposal-class-properties 添加到 .babelrc 文件。Babel 知道如何处理类属性。
```
{
    "presets": [
        "@babel/env",
        "@babel/react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}
```
我们已经到了本教程的结尾。现在让我们运行前面的命令，它们应该不会给我们任何错误。
```
npm run webpack

npm start
```
浏览器上的最终输出

如果你已经走到这一步，一定要提醒自己，你很棒。你今天学到了新东西。祝你拥有美好的一天。感谢你阅读全文。

如果您在整个过程中遇到任何问题，可以参考Github Repo的链接。如果您发现任何软件包更新导致问题，请随时进行调整。

照片由Tamara Bitter在Unsplash上拍摄

鏂囩珷鏉ユ簮锛�https://dev.to/deadwing7x/setup-a-react-app-with-webpack-and-babel-4o3k