我正在构建一个同构的React/React-Router/Redux/Webpack应用程序,我正在尝试实现服务器端渲染.
我的目录如下:
/client /actions /components /containers /server /server.js
在我的webpack配置中,我为客户端内的所有文件夹设置了别名:
var path_base = path.resolve(__dirname, '..'); const resolve = path.resolve; const base = function() { var args = [path_base]; args.push.apply(args, arguments); return resolve.apply(resolve,args); }; const resolve_alias = base.bind(null, 'src/client'); const aliases = [ 'actions', 'components', 'constants', 'containers', 'middleware', 'reducers', 'routes', 'store', 'styles', 'utils', 'validation' ];
所以在webpack捆绑的代码中,我可以这样做:
import { Widget } from 'components';
并且该导入由webpack解决.
现在在我的服务器代码中,为了进行渲染,我必须导入一些我的客户端文件,比如routes/index.js
.我快到的时候我输入我的路线文件的问题,它使用的WebPack别名到另一个文件,说components
还是containers
那么自然,节点JS需要系统无法解决它.
我该如何解决这类问题?我看了这个问题,它谈到了基本上使用mock-require设置webpack中存在的相同别名.但后来问题变成了我的路径文件导入我的所有组件,然后所有导入的东西,如样式表,图像等.我应该使用像webpack-isomorphic-tools这样的东西吗?
我一直在看的指南(例如这个)都非常擅长展示服务器端渲染是如何完成的,但它们都没有真正谈论如何解决所有需求和诸如此类的东西.