美文网首页学习前端资源程序员
webpack+react+nodejs服务端渲染

webpack+react+nodejs服务端渲染

作者: tsyeyuanfeng | 来源:发表于2015-10-26 21:31 被阅读20401次

    前端时间用react写网站,但是一直都是采用前端渲染的方式。最近两天有时间,研究一下怎么实现react的后端渲染。

    一、环境

    • Webpack
    • React
    • NodeJS

    二、思路

    前端构建工具采用了Webpack,React组件使用ES6语法编写。由于Webpack支持像引入普通JS模块一样引入图片、样式等资源文件,所以React组建内的图片和样式都是通过import方式引入的。因此,要实现服务端渲染,要做三件事情。

    1. 编写后端渲染所需的入口文件,该入口文件的主要作用是输出首页HMTL;
    2. 使用Webpack编译入口文件,使得Node解析器能够加载并执行(因为React组件是使用ES6语法编写的,而且图片和样式文件的加载使用的是只有Webpack能够识别的模块加载方式,所以Node解析器是无法直接加载执行后端入口文件的)
    3. 把样式代码从React组件中提取出来,放到上一步生成的HTML代码中,这样浏览器才能正常显示从服务端发送过去的页面。

    三、遇到的问题

    本次代码实现上借鉴了Webpack官方提供的例子:react-webpack-server-side-example,但是遇到几个坑。

    坑一: Webpack版本不一样,导致直接使用官方例子提供的style-collector.loader.js提取CSS代码时失败。

    官方例子使用的Webpack版本是"webpack": "~1.3.1-beta7",而我使用的Webpack版本是"webpack": "^1.12.2"
    可能是由于版本升级导致API有所变化,所以当在style-collector.loader.js文件里面调用下图这一段代码去提取CSS时红色框框内的那一句话直接返回的并不是CSS代码,而是一个数组。

    style-collector.loader.js
    提取CSS代码时的结果图
    所以,我把在红色框框的那一段代码后面加了数组索引[0][1]
    修改后
    这样返回的就是要提取的CSS了。

    坑二: 官方版本的提取CSS的代码直接搬过来不能用,提取不到任何东西,即使解决了坑一

    让我们来看看官方的例子是怎么提取CSS的。
    首先:官方的style-collector.loader.js是这样的。

    style-collector.loader.js
    这段代码定义了一个Webpack loader,即加载器。它的大概意思就是,在加载css文件的地方,插入一段JS代码,这段JS代码的作用是调用style-collector.js的add方法,而css代码会转成字符串作为参数传给add方法。

    然后,我们来看看style-collector.js文件,它是这样的。

    style-collector.js
    这个模块定义了两个方法,一个collect方法和一个add方法。其中,默认定义的add方法是一个空方法。有点奇怪,我们继续往下看。
    在官方例子的服务端入口文件page.js里面,有这么一段:
    page.js
    红色框框内的代码是提取CSS用的,这里调用了style-collector.js的collect方法,然后传了一个回调函数给collect方法,回调函数的作用是把Application组件渲染成字符串。那么这里是怎么提取CSS呢?
    回头看看style-collector.js的内容,在collect方法里面,执行回调函数之前,定义了一个stuff数组用于存放CSS,并且改变了模块默认的add方法;执行回调函数之后,就返回了CSS了。所以,所有把戏都藏在回调函数里头。
    那么,执行回调函数的时候发生了什么呢?
    我们知道,回调函数只做了一件事,那就是把Application组件渲染成字符串。让我们来看看Application组建的内容。
    Paste_Image.png
    Soga!原来在Application组件渲染的时候,加载了Application.css文件,而先前说过,style-collector.loader.js这个加载器会在加载CSS文件的地方插入一段JS代码,这段JS代码的作用是调用style-collector.js的add方法,而css代码会转成字符串作为参数传给add方法。所以,在执行回调函数的过程中,调用了一次style-collector.js的add方法,把CSS添加到了stuff数组中,所以执行完回调函数之后,自然就提取到了CSS。

    好了,了解完官方提取CSS的原理,来看看我的代码是怎么写的。
    首先,我的React组件是这样写的。

    我的React组件
    与官方的区别在于,我是在组件的头部,而不是在render方法中引入CSS文件的。问题就出在这里。
    如果我把CSS文件的引入写在组件的头部,用Webpack编译的时候,style-collector.loader.js会在组件头部插入一段JS代码,这段JS代码的作用上面已经提过了,就是调用style-collector.js的add方法。当我从page.js里面引入组件的时候(也是在page.js的头部引入),就已经执行了这一段代码,而此时style-collector.js的collect方法还没有被执行,默认的add方法还没有被改变,所以最终提取不到CSS。

    所以,我把style-collector.js的内容作了修改,如下图:

    修改后的style-collector.js
    这样,无论从哪里加载CSS文件,都可以把CSS添加到stuff数组中,最后调用collect方法即可获取所有的CSS。如下图:
    修改后的page.js

    四、总结

    • 代码不能照搬照抄,要理解其原理,然后根据自己的实际情况加以运用。其实官方文档开头就写了You shouldn't use the code, only the idea. 啪啪,打脸!


      Webpack Github 文档
    • 很久没有体验这种发现问题与解决问题的乐趣了,我记得从小我就很喜欢这种乐趣。不忘初心,方得始终!

    相关文章

      网友评论

      • andycall:webpack作者的那种方式每一次在node端运行还要耗费资源在css上面,为毛不用
        extract-text-webpack-plugin 插件把css合并成独立的css文件,之后再直接引入。
        tsyeyuanfeng:这样当然也可以,而且在生产环境中,应该是提倡这种使用方式的。但是在平时的开发测试中,我觉得使用前者更好,因为可以结合Webpack dev server做CSS 的热替换
      • 杨贤斌:赞!
      • cf2a2fffad34:学学看
      • 01cbea88c9bd:学习了

      本文标题:webpack+react+nodejs服务端渲染

      本文链接:https://www.haomeiwen.com/subject/bpjxhttx.html