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

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