webpack+react+nodejs服务端渲染_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了webpack+react+nodejs服务端渲染_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4307字，纯文字阅读大概需要7分钟。
内容图文
前端时间用react写网站，但是一直都是采用前端渲染的方式。最近两天有时间，研究一下怎么实现react的后端渲染。
一、环境
- Webpack
- React
- NodeJS
二、思路
前端构建工具采用了Webpack，React组件使用ES6语法编写。由于Webpack支持像引入普通JS模块一样引入图片、样式等资源文件，所以React组建内的图片和样式都是通过import方式引入的。因此，要实现服务端渲染，要做三件事情。
- 编写后端渲染所需的入口文件，该入口文件的主要作用是输出首页HMTL；
- 使用Webpack编译入口文件，使得Node解析器能够加载并执行（因为React组件是使用ES6语法编写的，而且图片和样式文件的加载使用的是只有Webpack能够识别的模块加载方式，所以Node解析器是无法直接加载执行后端入口文件的）
- 把样式代码从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 文档
- 很久没有体验这种发现问题与解决问题的乐趣了，我记得从小我就很喜欢这种乐趣。不忘初心，方得始终！
内容总结
以上是互联网集市为您收集整理的webpack+react+nodejs服务端渲染_html/css_WEB-ITnose全部内容，希望文章能够帮你解决webpack+react+nodejs服务端渲染_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。