了解 React 中的基本工作流程

2020-05-21 08:00:00 · 飞浪

介绍 React是一个用于创建基于组件的用户界面的优秀库。它通过提供用于创建组件的声明式API来照顾开发人员的体验。React生态系统有一个出色的全局包，名为create-react-a

介绍

React 是一个用于创建基于组件的用户界面的优秀库。它通过提供用于创建组件的声明式 API 来照顾开发人员的体验。React 生态系统有一个出色的全局包，名为create-react-app，可以使用单个命令轻松设置 React 项目。

像create-react-app这样的入门工具非常棒，但您必须了解其底层工作原理。在本指南中，您将学习如何设置自定义webpack配置以从头开始创建 React 应用并解压其背后的工作流程。

Webpack

在开始之前，本节将为您简单介绍一下 webpack，以便您可以跟进接下来的部分。

从本质上讲，webpack 是适用于现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理您的应用程序时，它会在内部构建一个依赖关系图，该图映射项目所需的每个模块并生成一个或多个包。

这意味着 webpack 可以抓取您的所有代码、管理依赖项、删除不需要的死代码并生成优化的 JavaScript 文件。它可以使用 webpack 插件预处理或将 SASS 转换为 CSS、将 JSX 转换为 JS，并进行许多其他优化。

您的源代码可能有许多文件，您还可以根据项目结构导入依赖项；最后，webpack 默认将它们打包到 dist 文件夹内的单个.js文件中。webpack 的另一个很酷的功能是，您可以使用动态导入进行代码拆分，以便只向用户提供运行该特定页面所需的 JavaScript。

接下来，您将看到设置 React 应用程序所需的各种插件。

初始化项目

首先为项目创建一个目录并初始化npm。

      > mkdir react-app
> cd react-app
> npm init -y
    

运行这些命令后，您应该会在项目中看到一个package.json文件。

安装依赖项

React 有两个部分：react库（用于创建虚拟 DOM）和react-dom库（用于浏览器上的 React 渲染器）。我们需要这两个库来创建一个完整的 React Web 应用。

因此要安装这些库，请运行以下命令。

      > npm i --save react react-dom

接下来安装的所有内容都是开发依赖项。

安装webpack，它将把组件中的所有 JSX 代码转换为 JavaScript，并安装 webpack-dev-server以启用热重载。这意味着无论何时进行任何更改，浏览器都会自动更新代码，而无需刷新。

您需要的另一个 webpack 依赖项是webpack-cli，它允许您编写 webpack 命令和构建脚本。

      > npm i --save-dev webpack webpack-dev-server webpack-cli

接下来，您将安装所有 babel 依赖项。React 使用 ES6 类语法和 JSX。Babel 将根据所使用的浏览器将语法转换为浏览器友好的 JavaScript。

      > npm i --save-dev babel-core babel-loader babel-preset-react babel-preset-env html-webpack-plugin
    

设置 Babel 预设

在项目的根目录中，创建一个.babelrc文件，它将指定 webpack 要使用的所有 babel 预设。

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

这就是您需要对此文件执行的全部操作。

设置 Webpack 配置

现在您已拥有创建 React 项目所需的所有依赖项，请配置 webpack。在项目目录中创建一个webpack.config.js文件。

您需要在webpack.config.js文件中执行一些操作。需要路径模块来解析项目中的文件，并需要html-webpack-plugin来创建根 HTML 文件。

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

module.exports = {
  // webpack config
};
    

最好将所有应用代码都写在src目录中，这样 webpack 就可以将此目录用作项目的源代码。在src目录中，创建一个index.js文件作为项目的入口文件。

完成后，在 webpack 配置文件中指定入口和输出路径。

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./app.bundle.js",
  },
};
    

src 文件夹中的所有文件都将被转译到dist 文件夹内的app.bundle.js文件中。

接下来，在配置中指定一个模块对象，以选择 babel 应转译的文件扩展名。在本例中，扩展名将是.js。

      // ...

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
    ],
  },
};
    

下一步是在 src 目录中创建一个 HTML 模板，webpack 会自动将最终的 js 包文件注入到<script>标记中。使用模板的好处是，您可以添加应用程序可能需要的其他标记。

因此，在 webpack 配置文件中，使用html-webpack-plugin指定 HTML 模板。

      // ...

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./app.bundle.js",
  },
  module: {
    // ...
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      inject: "body",
    }),
  ],
};
    

差不多就是这样了。现在你可以编写一些 React 代码来测试一下。为简洁起见，本指南不包含 React 代码，但你可以查看其他指南（例如此处和此处）以获取代码示例。

编写构建脚本

最后一步是将 webpack 命令包含在package.json文件的 scripts 对象中，以运行 webpack 服务器并转换 dist 文件夹中的文件。

      {
    // ...
    "scripts" : {
        "start": "./node_modules/.bin/webpack-dev-server --mode development --open --hot",
        "build": "./node_modules/.bin/webpack --mode production"
    },
    // ...
}
    

启动脚本将加载应用程序的开发版本，立即在 localhost:8000 打开浏览器选项卡，并为您启用开箱即用的热重新加载。

构建脚本将在 dist 文件夹中生成应用程序的生产版本。通常，您会希望将 dist 文件夹作为生产服务器中的根目录。

结论

了解您每天使用的工具非常重要，这样如果遇到问题，您可以返回自行设置项目。最棒的是，您不必为每个项目从头开始编写 webpack 配置。您可以创建一个 repo、克隆 repo，然后通过运行npm install来安装依赖项。

希望本指南能够阐明create-react-app背后的神奇作用。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

了解 React 中的基本工作流程

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const path = require("path"); const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "./app.bundle.js", }, };

// ... module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "./app.bundle.js", }, module: { rules: [ { test: /\.js$/, loader: "babel-loader", }, ], }, };

// ... module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "./app.bundle.js", }, module: { // ... }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", inject: "body", }), ], };

{ // ... "scripts" : { "start": "./node_modules/.bin/webpack-dev-server --mode development --open --hot", "build": "./node_modules/.bin/webpack --mode production" }, // ... }