Question

我正在构建一个同构的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要求系统无法解析它。 / p>

我该如何解决这类问题？我查看了this question，它谈到了基本上使用mock-require设置webpack中存在的相同别名。但问题就变成了我的路径文件导入我的所有组件，然后所有组件都会导入样式表，图像等。我应该使用像webpack-isomorphic-tools这样的东西吗？

我一直在关注的指南（例如this）非常善于展示如何完成服务器端渲染，但没有人真正谈论如何解决所有需求和诸如此类的东西。

Answer 1

在与这个问题作斗争2天后，我选择了babel-plugin-webpack-alias。 What you need to do解析路径为：

$ npm install --save-dev babel-plugin-webpack-alias
将插件添加到.babelrc
将别名添加到webpack.config（确保使用path.join()）
如果您在加载样式时遇到问题，请参阅this post

我尝试的另一个选项是universal-webpack，但我发现它有点冗长。如果您想大致了解整个服务器端加载的工作原理，可以查看this video。

Answer 2

如果你真的想要它们，请通过babel运行你的服务器端代码并使用这个插件：https://www.npmjs.com/package/babel-plugin-module-alias这将让你做与webpack相同的事情。

编辑：这个效果更好：https://github.com/jagrem/babel-resolve-relative-module它允许多个路径

Answer 3

尝试使用db.collection.find({ (some conditions) })。在require调用期间，Node将始终在此路径中查找模块。它允许您根据需要缩短相对路径。

NODE_PATH

有关详细信息，请参阅Node.js docs。

P.S。这件事非常敏感，所以要小心使用。现在你的代码严格依赖于环境并可能在某个地方破解。

Answer 4

如果您使用webpack-isomorphic-tools，那么它会将您的webpack配置考虑在您的服务器端，这将使您的所有别名都能正常工作。

https://www.npmjs.com/package/webpack-isomorphic-tools

Node JS服务器代码

4 个答案: