从

从设置到部署的逐步 React 配置

2025-06-04

从设置到部署的逐步 React 配置

您可以在此处下载本指南的 PDF 版本

你已经使用 create-react-app（又名 CRA）一段时间了。它很棒，你可以直接开始编码。但是什么时候需要退出 create-react-app，开始配置你自己的 React 应用呢？总有一天，我们必须放弃安全检查，开始独立开发。

本指南将介绍我个人在几乎所有 React 项目中都使用过的最简单的 React 配置。在本教程结束时，我们将拥有自己的样板，并从中学习一些配置。

目录

为什么要创建自己的配置？

出于某些原因，创建自己的 React 配置是有意义的。显然，您精通 React，并且想要学习如何自学使用 webpack 和 Babel 等工具。这些构建工具功能强大，如果您有空闲时间，学习它们总是有益的。开发人员天生好奇，所以如果您想了解它的工作原理以及各个部分的功能，那么让我来帮您。

此外，通过 create-react-app 隐藏 React 配置，适合刚开始学习 React 的开发者，因为配置不应该成为入门的阻碍。但当事情变得复杂时，你当然需要更多工具来集成到你的项目中。想想看：

  • 为 less、sass 添加 webpack 加载器
  • 进行服务器端渲染
  • 使用新的 ES 版本
  • 添加 MobX 和 Redux
  • 仅出于学习目的而进行自己的配置

如果你在网上搜索一下，会发现一些技巧可以绕过 CRA 的限制，比如 create-react-app rewired。但说真的，为什么不直接自学 React 配置呢？我会一步一步教你。

既然您已经确信要学习一些配置，那么让我们从头开始初始化一个 React 项目。

打开命令行或 Git bash 并创建一个新目录

mkdir react-config-tutorial && cd react-config-tutorial
Enter fullscreen mode Exit fullscreen mode

通过运行以下命令初始化 NPM 项目：

npm init -y
Enter fullscreen mode Exit fullscreen mode

现在安装 React

npm install react react-dom
Enter fullscreen mode Exit fullscreen mode

另外，您可以在阅读本教程的同时查看GitHub 上的源代码，以了解有关设置的说明。

配置 webpack 4

我们的第一站是 Webpack。它是一款非常流行且强大的工具，不仅用于配置 React，还可用于配置几乎所有前端项目。Webpack 的核心功能是将我们在项目中编写的大量 JavaScript 文件转换为单个精简文件，以便快速运行。从 Webpack 4 开始，我们无需编写配置文件即可使用它，但在本教程中，我们将编写一个配置文件，以便更好地理解它。

首先，让我们进行一些安装

npm install --save-dev webpack webpack-dev-server webpack-cli
Enter fullscreen mode Exit fullscreen mode

这将安装：

  • webpack 模块— 包含所有核心 webpack 功能
  • webpack-dev-server — 当我们的文件发生更改时，此开发服务器会自动重新运行 webpack
  • webpack-cli — 允许从命令行运行 webpack

让我们尝试通过添加以下脚本来运行 webpackpackage.json

"scripts": {
  "start": "webpack-dev-server --mode development",
},
Enter fullscreen mode Exit fullscreen mode

现在index.html在您的根项目中创建一个包含以下内容的文件：

<!DOCTYPE html>
<html>
  <head>
    <title>My React Configuration Setup</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

创建一个名为的新目录src，并在其中创建一个新的 index.js 文件

mkdir src && cd src && touch index.js
Enter fullscreen mode Exit fullscreen mode

然后将一个 React 组件写入文件中：

import React from "react";
import ReactDOM from "react-dom";

class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}

ReactDOM.render(<Welcome />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

使用...运行 webpacknpm run start将会触发错误。

You may need an appropriate loader to handle this file type
Enter fullscreen mode Exit fullscreen mode

配置 Babel 7

我们上面编写的 React 组件使用了classES6 语法，Webpack 需要 Babel 将 ES6 语法处理成 ES5 语法才能使该类正常工作。

让我们将 Babel 安装到我们的项目中

npm install --save-dev @babel/core @babel/preset-env \
@babel/preset-react babel-loader
Enter fullscreen mode Exit fullscreen mode

为什么我们需要这些包？

  • @babel /core是包含 babel 转换脚本的主要依赖项
  • @babel /preset-env是 Babel 的默认预设，用于将 ES6+ 代码转换为有效的 ES5 代码。可选择自动配置浏览器 polyfill
  • @babel /preset-react用于将 JSX 和 React 类语法转换为有效的 JavaScript 代码
  • babel-loader是一个 webpack 加载器，用于将 Babel 挂载到 webpack 中。我们将使用此包从 webpack 运行 Babel。

要将 Babel 挂载到我们的 webpack 中，我们需要创建一个 webpack 配置文件。我们来写一个webpack.config.js文件：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './',
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
};
Enter fullscreen mode Exit fullscreen mode

这个 webpack 配置基本上表明，entry我们应用程序的核心来自 index.js，因此请提取该文件所需的所有内容，然后将output打包过程的放入dist目录中，命名为bundle.js。哦，如果我们在 上运行webpack-dev-server，那么请告诉服务器从 config 提供内容contentBase，该目录与此配置所在的目录相同。另外，请将 放在目录bundle.js中dist/。对于所有 .js 或 .jsx 文件，请使用babel-loader进行转译。

为了使用 Babel 预设，请创建一个新.babelrc文件

touch .babelrc
Enter fullscreen mode Exit fullscreen mode

写入以下内容：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
Enter fullscreen mode Exit fullscreen mode

现在npm run start再次运行。这次它会成功。

添加 Prettier

为了进一步加快开发速度，让我们使用 Prettier 来制作代码格式化程序。在本地安装依赖项并使用 --save-exact 参数，因为 Prettier 在补丁版本中引入了样式更改。

npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode

现在我们需要编写.prettierrc配置文件：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}
Enter fullscreen mode Exit fullscreen mode

规则意味着我们要在每个语句的末尾添加分号，在适当的时候使用单引号，并在多行 ES5 代码（如对象或数组）后面加上逗号。

您可以从命令行运行 Prettier：

npx prettier --write "src/**/*.js"
Enter fullscreen mode Exit fullscreen mode

或者在我们的文件中添加一个新脚本package.json：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --open --mode development",
  "format": "prettier --write \"src/**/*.js\""
},
Enter fullscreen mode Exit fullscreen mode

现在我们可以使用以下命令运行 Prettiernpm run format

此外，如果您使用 VSCode 进行开发，则可以安装Prettier 扩展并在每次保存更改时通过添加以下设置来运行它：

"editor.formatOnSave": false
Enter fullscreen mode Exit fullscreen mode

添加源映射以获得更好的错误日志

由于 webpack 会打包代码，因此必须使用源映射来获取引发错误的原始文件的引用。例如，如果您将三个源文件（a.js、b.js和c.js）打包成一个包（bundle.js），并且其中一个源文件包含错误，则堆栈跟踪将直接指向bundle.js。这很成问题，因为您可能想确切地知道是文件 a、b 还是 c 导致了错误。

您可以告诉 webpack 使用配置的 devtool 属性生成源映射：

module.exports = {
  devtool: 'inline-source-map',
  // ... the rest of the config

};
Enter fullscreen mode Exit fullscreen mode

虽然这会导致构建速度变慢，但对生产环境没有影响。只有打开浏览器 DevTools 时才会下载 Sourcemap 。

设置 ESLint

Linter 是一个程序，用于检查代码中是否存在任何可能导致 bug 的错误或警告。JavaScript 的 Linter，ESLint，是一个非常灵活的 linting 程序，可以通过多种方式进行配置。

但在开始之前，让我们先将 ESLint 安装到我们的项目中

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react
Enter fullscreen mode Exit fullscreen mode

eslint是所有功能的核心依赖，而 eslint-loader 使我们能够将 eslint 挂接到 webpack 中。由于 React 使用了 ES6+ 语法，我们将添加babel-eslint——一个使 eslint 能够对所有有效的 ES6+ 代码进行 lint 的解析器。

eslint-config-react和eslint-plugin-react都用于使 ESLint 能够使用预制规则。

由于我们已经有了 webpack，我们只需要稍微修改一下配置：

module.exports = {

  // modify the module
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'] // include eslint-loader
      }
    ]
  },
};
Enter fullscreen mode Exit fullscreen mode

然后创建一个名为以下内​​容的 eslint 配置文件.eslintrc：

{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

该配置的基本意思是：“嘿，ESLint，请babel-eslint在检查代码之前先解析它；检查代码时，请检查 React 规则配置中的所有规则是否都已通过。从浏览器和 Node 的环境中获取全局变量。对了，如果是 React 代码，请从模块本身获取版本号。这样，用户就不必手动指定版本号了。”

我们不需要手动指定自己的规则，只需扩展react由eslint-config-react eslint-plugin-react

我发现了错误！我该怎么办？

不幸的是，真正弄清楚如何修复 ESLint 错误的唯一方法是查看rules的文档。有一种快速修复 ESLint 错误的方法，那就是使用eslint --fix，而且它确实很有效。让我们在package.json文件中添加一个脚本：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --mode development",
  "format": "prettier --write \"src/**/*.js\"",
  "eslint-fix": "eslint --fix \"src/**/*.js\"", // the eslint script
  "build": "webpack --mode production"
},
Enter fullscreen mode Exit fullscreen mode

然后使用 运行它npm run eslint-fix。如果您现在对 ESLint 还不太了解，不用担心。随着使用 ESLint，您将学到更多关于它的知识。

添加 CSS LESS 处理器

为了将 LESS 处理器添加到我们的 React 应用程序中，我们需要 webpack 中的 less 和 loader 包

npm install --save-dev less less-loader css-loader style-loader
Enter fullscreen mode Exit fullscreen mode

less-loader它会将 Less 文件编译成 CSS，同时css-loader解析类似import或 的CSS 语法url()。它style-loader会获取编译后的 CSS 并将其加载到<style>bundle 的标签中。这对于开发来说非常有用，因为它允许我们即时更新样式，而无需刷新浏览器。

现在让我们添加一些 css 文件，创建一个新的样式目录src/style

cd src && mkdir style && touch header.less && touch main.less
Enter fullscreen mode Exit fullscreen mode

header.less内容：

.header {
  background-color: #3d3d;
}
Enter fullscreen mode Exit fullscreen mode

main.less内容：

@import "header.less";

@color: #f5adad;

body {
  background-color: @color;
}
Enter fullscreen mode Exit fullscreen mode

现在main.less从以下位置导入我们的文件index.js：

import "./style/main.less";
Enter fullscreen mode Exit fullscreen mode

然后更新我们的 webpack 配置module属性：

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      { 
        test: /\.less$/,
        use: [ 
          'style-loader',
          'css-loader', 
          'less-loader',
        ],
      },
    ]
  },
Enter fullscreen mode Exit fullscreen mode

运行启动脚本，我们就可以开始了！

将 React 应用部署到 Netlify

所有应用程序的最后一步都需要部署，对于 React 应用程序来说，部署非常容易。

首先，让我们在 Webpack 配置中将构建输出和开发contentBase从更改dist为。build

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'), // change this
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: "./build",
  },
  //...
Enter fullscreen mode Exit fullscreen mode

现在让我们安装一个名为 HtmlWebpackPlugin 的新 Webpack 插件

npm install html-webpack-plugin -D
Enter fullscreen mode Exit fullscreen mode

此插件将在Webpack 创建index.html文件的同一目录中生成文件。在本例中，即目录。bundle.jsbuild

为什么我们需要这个插件？因为 Netlify 要求将单个目录设为根目录，所以我们无法index.html在根目录中使用 Netlify。你需要更新你的 webpack 配置，如下所示：

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

module.exports = {
  entry: //... 
  output: {
    //...
  },
  devServer: {
    contentBase: "./build",
  },
  module: {
    //...
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:  path.resolve('./index.html'),
    }),
  ]
};
Enter fullscreen mode Exit fullscreen mode

并且请script从您的中删除标签index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>My React Configuration Setup</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

现在，您可以使用命令测试配置npm run build。完成后，将样板代码推送到 GitHub 仓库。是时候部署我们的应用程序了！

让我们注册一个 Netlify 帐户。

如果您以前没听说过 Netlify，它是一款非常棒的静态网站托管服务，免费提供部署静态网站所需的所有工具。什么是静态网站？它是由一系列静态 HTML 页面创建的网站，无需任何后端。我们现在的 React 样板代码也算作静态网站，因为我们没有配置后端，只有 HTML 和 JavaScript。

注册后，从 Git 中选择新站点并选择 GitHub 作为您的 Git 提供商

Netlify 提供商

您需要授予 Netlify 权限，然后选择您的 React 样板存储库。

Netlify 选择样板

现在您需要输入构建命令和发布目录。正如您所见，这就是我们需要 HtmlWebpackPlugin 的原因，因为我们只需要从一个目录来服务所有内容。index.html我们无需手动更新根文件以进行更改，只需使用插件即可生成它。

Netlify 选择样板

确保您拥有与上面的屏幕截图相同的命令，否则您的应用程序可能无法运行。

Netlify 选择样板

一旦部署状态变为published（上面的数字 2），您就可以转到 Netlify 为您的应用程序分配的随机站点名称（数字 1）。

你的 React 应用程序已部署。太棒了！

结论

您刚刚创建了自己的 React 项目样板，并将其实时部署到 Netlify。恭喜！当然，我没有深入讲解 Webpack 配置，因为这个样板只是一个通用的入门示例。在某些情况下，我们需要服务器端渲染等高级功能，则需要再次调整配置。不过别担心！您已经学到了这一步，这意味着您已经了解了 Webpack、Babel、Prettier 和 ESLint 的作用。Webpack 拥有许多强大的加载器，可以帮助您处理构建 Web 应用程序时经常遇到的许多情况。如果您仍然对配置感到不适应，也不用担心。随着练习的增多，您会逐渐习惯的。

我以后会制作更多关于 React 的教程，比如如何使用 React 路由器和 React 头盔。如果你感兴趣，可以关注我的DEV 账号，或者订阅我的新闻邮件，这样新指南发布时你就会收到通知。你还可以免费获得这份配置的 PDF 版本！🎁

感谢阅读！希望你学到了新东西 :)

文章来源：https://dev.to/codewithnathan/step-by-step-react-configuration-2nma
Devto 翻译
PREV
GitHub 上的开源 React 项目列表，可通过 GitHub Profile README Generator 进行学习
NEXT
如何制作交互式 ReactJS 表单