如何在 ReactJS 项目中,通过 Webpack 构建服务器端代码

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

Web应用经常会分为客户端和服务器端,通常来说,客户端使用ReactJS等松耦合的JavaScript库,而服务器端使用NodeJS、Express等的服务端框架。然而,在一个单页应用(SPA)中,我们拥有一个服务端渲染怎么办呢?在这篇文章中,我们将探讨如何使用Webpack,在ReactJS项目中创造服务端渲染,建议读者拥有一定的Webpack以及NodeJS基础。

为什么要使用服务端渲染

在理解如何创造服务端渲染之前,我们有必要了解一下服务端渲染是为什么而存在。在一个SPA的应用中,通常是靠浏览器的JavaScript去渲染页面。然而,这也就意味着,当我们在等待返回数据的时候,浏览器的JS正在等待数据的响应。而这也就导致了一个渲染过程需要更多的时间和资源。然而,在使用服务端渲染时,即使在等待数据返回的过程中,服务器也可以通过服务端渲染去直接渲染页面。这意味着,你可以在AngularJS或ReactJS应用中快速获得首屏加载速度的提升。

开始编写代码

闲话少说,来开始编写代码吧。我们将使用基于ReactJS应用的服务端渲染--一个非常基本的应用来阐述我们的思路。

------ ----- ---- -------
------ -------- ---- -----------
------ --- ---- ------------------

----------------
     -------
     -------------------------------
-

这里,我们将使用一个在components文件夹下面的名为App.js的组件。

------ ----- ---- -------

----- --- ------- --------------- -
     -------- -
          ------ -
               -----
                    ---------- ----- ----------- ---------------
               ------
          -
     -
-

------ ------- ---

懂得ReactJS之后,这当然不是什么新东西。接下来,我们将创建一个服务端渲染的ExpressJS应用。

------ ------- ---- ---------

----- --- - ---------

----- ------ - ------------------------
    ------
-

------------ ----- ---- -- -
    ------------------- -
         ------
    --
--

--------------------------- -- ----- -- -- -
     ---------------- -- ------- -- ----- ------------------ -- -------
--

这样,当我们运行npm start的时候,我们将会在http://localhost:3000上面看到我们的React应用。

然而,我们使用的React应用在客户端与服务器端是分开的,这样也就意味着,我们需要对Webpack进行配置。

----- ---- - ---------------
----- ------------- - ---------------------------------

-------------- - -
     ------ ----------------------- -------------------
     ------- -
          --------- ------------------
     --
     ------- -------
     ---------- ------------------
     ------- -
          ------ -
               -
                  ----- --------
                  -------- ----------------------- ----------
                  ---- -
                         ------- ---------------
                         -------- -
                              -------- --------------------- ----------------------
                         -
                    -
               --
               -
                  ----- ---------
                  ---- -
                         -------------------------- 
                         -
                              ------- -------------
                              -------- -
                                   -------- ----
                              -
                         -
                    -
               -
          -
     -
-

这是服务端渲染的Webpack配置文件。其中有几点需要注意:

  • 我们将资源类型扩展为了js和css。

  • 我们将server/index.js文件作为Webpack的入口。

  • 我们指定了Webpack的目标为node。

  • 我们添加了nodeExternals()对象到externals中,这样可以防止打包node_modules中的第三方库。

  • 我们扩展了babel-loader和css-loader,这样我们的React等应用可以被正确的打包。

值得一提的是,像React中的componentDidMount()生命周期函数就无法在服务端渲染时使用。然而,我们可以使用React.useEffect()去替代它。因此,你可能需要花一些时间去熟悉一下React Hooks的使用。

结论

在这篇文章中,我们已经探讨了如何使用Webpack,在ReactJS项目中创造一个服务器端渲染应用。我们知道,在服务器端渲染中,我们无法像客户端渲染一样使用很多基于客户端的JS库。然而,在使用成熟的库时,像ReactJS、ExpressJS、Webpack等等,我们可以在构建服务端渲染时达到较高的效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67186eadad1e889fe22b2f7b


猜你喜欢

  • 解析 ECMAScript 2017 (ES8) 中的 Shared Memory 和 Atomics

    前言 Shared Memory 和 Atomics 是 ECMAScript 2017 (ES8) 中新增的特性,这些特性主要为 Web Worker 和 JavaScript 线程之间的通信提供...

    19 天前
  • 如何使用 Node.js 管理和部署 Web 应用程序

    Node.js 已经成为了前端开发的重要工具之一,它可以帮助我们创建和管理各种 Web 应用程序。本文将介绍如何使用 Node.js 来管理和部署 Web 应用程序,包括如何搭建环境、如何使用 npm...

    19 天前
  • 在 Web Components 中使用 React 的技巧

    简介 Web Components 是一种用于开发 Web 应用程序的新技术。它通过将组件化的概念引入 Web 开发中,使得 Web 开发者可以创建可重用的自定义元素,并通过 JavaScript 组...

    19 天前
  • 如何在 Jest 中使用 Babel 转换 ES6

    随着 JavaScript 语言的不断发展,ECMAScript 新版本的发布,前端项目中使用 ES6 已经成为了一种趋势和标配。然而,不同的浏览器可能不支持 ES6 中的一些新特性,这就需要通过 B...

    19 天前
  • 为什么你的网站需要无障碍性?

    随着互联网的发展,网站已经成为人们获取信息、交流、社交和购物的主要途径之一。但是,在网站的设计和开发过程中,我们是否考虑过“无障碍性”这个因素呢? 无障碍性是指设计和开发可以让所有人都可访问的网站,包...

    19 天前
  • JavaScript 性能优化:提升前端性能

    随着互联网的发展,前端技术也越来越复杂。然而,这意味着我们需要在处理更多数据的同时保持网站速度。 前端性能优化是提高用户体验和访问速度的最佳方法。 在这篇文章中,我们将讨论几种可以提高前端性能的 Ja...

    19 天前
  • 使用 Serverless Framework 创建 Node.js 服务

    在前端开发中,随着云计算和微服务的兴起,Serverless 架构已经成为一种受欢迎的解决方案。相比传统的服务部署模式,Serverless 架构具有更高的弹性和可扩展性,能够更好地满足业务需求。

    19 天前
  • GraphQL 中的错误处理详解

    GraphQL 是一种面向客户端的查询语言和 API 标准,可以让客户端自定义需要获取的数据,无需后端开发人员预先定义好接口。但在实际开发中,错误处理是不可避免的一环。

    19 天前
  • React 应用中的容错处理技巧

    React 应用中的容错处理技巧 React 是一款流行的前端框架,能够帮助开发者更快地创建用户界面。在 React 应用中,容错处理是非常重要的。如果我们不正确地处理错误,应用程序可能会崩溃或导致不...

    19 天前
  • ES10 中的标准 JSON 的可选字符支持

    在 ES10 中,标准 JSON 的可选字符支持被引入了。这些可选字符不仅可以使用在字符串中,还可以使用在属性名中。 什么是标准 JSON JSON(JavaScript Object Notatio...

    19 天前
  • PM2 进程死锁问题的解决方法

    什么是 PM2? PM2 是一个具有负载均衡功能的进程管理工具,它可以帮助开发者管理 Node.js 进程。通过它,可以轻松地启动、重启和关闭进程,同时还可以监测进程状态和性能等信息。

    19 天前
  • ESlint-Plugin-React 的一个兼容性问题和解决方案讨论

    在前端开发中,使用 ESlint-Plugin-React 已经成为了一种通用的做法。当我们在使用 ESlint-Plugin-React 时,我们可能会遇到一些诡异的错误,其中一个常见的错误是thi...

    19 天前
  • MongoDB 报错:Connection refused,初学者如何解决?

    什么是 MongoDB? MongoDB是一种开源、跨平台的NoSQL数据库,具有高效的读写速度和高可用性。由于其架构简单,操作方便,被越来越多的企业和开发者所使用。

    19 天前
  • ES6 中使用 Object.assign 合并对象的技巧

    一、前言 Object.assign 方法是 ES6 中一个非常实用且方便的对象操作方法,可以用来合并对象或者为对象设置属性。在前端开发中,我们经常会使用它来完成一些常见的操作,比如合并配置对象,合并...

    19 天前
  • Kubernetes 中负载均衡器的替代方式

    Kubernetes 是一种开源的容器编排系统,能够自动化地部署、扩展和管理多个容器。在 Kubernetes 集群中,负载均衡是其中一个非常重要的组件,它可以使多个容器之间的负载在同一时间内均衡分配...

    19 天前
  • TypeScript:如何处理 TypeScript 静态代码分析中出现的警告?

    在使用 TypeScript 进行前端开发时,我们经常会遇到各种警告。这些警告可以帮助我们及早发现代码中的潜在问题,并提供了改进代码的机会。但是,在处理这些警告时,我们需要注意一些重要的细节。

    19 天前
  • Vue.js 如何优化渲染速度

    Vue.js 是一款流行的前端框架,其核心之一是提供高效的渲染性能。然而,在处理大规模数据时,Vue.js 可能会遇到一些性能瓶颈。在本文中,我们将详细讨论如何优化 Vue.js 的渲染速度。

    19 天前
  • 使用 Jest 测试 Node.js 应用程序

    在编写任何应用程序时,测试都是非常重要的部分。测试可以帮助我们发现问题并确保我们的代码质量。使用 Jest 测试 Node.js 应用程序是一种快速、简单的方法,可以轻松地编写和管理测试。

    19 天前
  • 如何为自闭症患者打造一个无障碍网站?

    在当今数字时代,互联网已成为人们获取信息和资源的主要途径,但是对于某些人来说,如自闭症患者,访问网站可能会变得更加困难。为了确保网站能够让自闭症患者获得更好的用户体验,我们需要设计和开发无障碍的网站。

    19 天前
  • Angular 应用中的调试技巧及工具推荐

    Angular 是一个基于 TypeScript 的流行前端应用程序框架,适用于构建复杂的单页应用(SPA)。在开发 Angular 应用程序时,您可能会遇到各种问题和错误。

    19 天前

相关推荐

    暂无文章