react服务端渲染过滤其他无关文件
发布于 2 个月前 作者 soullcm 257 次浏览 来自 分享

最近的react以及vue2,都有对于服务端渲染的涉及,因此我们项目中也开始了踩这个坑

既然为坑,那就不会一番风顺,坑之大,一锅炖不下

596417987421614926.jpg

首先node对于es6语法支持度以及jsx语法的支持就是个大问题,多亏了babel,安装babel-register,改写了require命令,为它加上一个钩子。 此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。阮一峰babel教程

npm i --save-dev babel-register

然后创建index.js,替换以前入口文件app.js

require('babel-register');
require('./app.js'); //这样就对app.js中的语法进行转码了,jsx、es2015搞起来

语法支持问题完成了,本文中心问题来了,对于同构中,若某个component里面有引入某个less、css等“乱七八糟”其他的文件,在运行时将会报如下错误,应该是识别不了

error1.png

查阅文档后,发现node模块系统还有个require.extensions属性,官方提示弃用了这个属性,不过值得庆幸的是,这个属性永远不会被移除,只是不推荐使用而已。

针对上述问题,我们可以将那些“乱七八糟”的文件忽略掉,创建个ignore.js

function ignore() {
    var extensions = ['.css', '.less']; //里面定义不需要加载的文件类型
    for (let i = 0, len = extensions.length; i < len; i++) {
        require.extensions[extensions[i]] = function () {
            return false;
        };
    }
}

module.exports = ignore;

然后在入口文件,如app.js中引入进来即可

require('ignore')();
var express = require('express');
// other code

希望对准备开启node端渲染的同学们有所帮助,共同学习

2 回复

这是一种思路,不过js和style分开打包最好,绝对互不影响

@DevinXian 恩,已经是用extract-text-webpack-plugin把css文件分开打包出来的,只是在服务端渲染时,renderToString和客户端同一个component,识别不了import或require后缀名为css/less等的文件,就报上面的错了

回到顶部