Node.js Node JS服务器代码中的网页包别名

我正在构建一个同构的React/React-Router/Redux/Webpack应用程序，并试图实现服务器端渲染

我的目录看起来像：

/client
    /actions
    /components
    /containers
/server
    /server.js

在我的网页包配置中，我为客户端中的所有文件夹设置了别名：

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

。当我导入我的routes文件时遇到的问题是，它在另一个文件中使用了一个webpack别名，比如

组件

或

容器

，因此自然，node js require系统无法解决它

我该如何解决这样的问题？我看了一下，它讨论了基本上设置webpack中存在的别名。但问题是，我的路由文件导入了我所有的组件，然后所有的组件都导入了样式表、图像等。我应该使用类似的东西吗

---

我一直在看的指南（例如）都很好地展示了服务器端渲染是如何完成的，但没有一本真正谈到如何解决所有的需求等等。

如果你真的需要，通过babel运行服务器端代码并使用这个插件：它将让你做与webpack相同的事情

---

编辑：这一个工作得更好：它允许多个路径

尝试使用

节点路径

。在require调用期间，节点将始终在此路径中查找模块。它允许您根据需要缩短相对路径

// turn this
import {Widget} from '../../components';

// into this
import {Widget} from 'components';

有关更多信息，请参阅

---

另外，这东西很敏感，所以要小心使用。现在，您的代码与环境紧密相关，可能会在某个地方出现问题。

在与此问题斗争了两天后，我决定使用babel插件网页包别名。 要解析路径，请执行以下操作：

$npm安装--保存开发巴贝尔插件网页包别名

将插件添加到你的.babelrc

将别名添加到webpack.config（确保使用

path.join（）

）

如果在加载样式时遇到问题，请参阅

---

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

如果您使用网页同构工具，那么它将考虑您的服务器端网页配置，这将使您的所有别名都能工作

---

这里似乎有几个问题：（a）在运行服务器端时如何使用别名，以及（b）如何处理服务器上包含的资源，如样式表。一种解决方案是通过webpack运行服务器代码。您可以在配置中使用

target:node

，它将在构建过程中为node优化它（即，它不会绑定node includes）。我有时这样做是为了使用Babel的代码。除了构建，绝对不要使用别名。任何解决方案充其量都是黑客的。为什么我不应该使用别名呢？当你使用webpack进行构建时，别名是可以使用的。您的问题是因为您在网页包构建中使用别名，并试图使相同的代码在网页包构建之外工作。我的观点是，要使用别名，还需要构建服务器代码（这将使别名正常工作）。如果没有构建，让别名工作的唯一方法就是将其组合在一起，这就是问题所在。黑客是不好的，所以也可以使用别名并构建服务器代码，或者干脆放弃别名。然后使用类似webpack的同构工具应该不会有问题，因为它支持服务器和客户端代码的别名。。我包括了我的别名文件、所有配置，然后是我的package.json中的脚本。有很多文件，服务器和客户端各有四个（基本配置、开发配置、生产配置、生产条目文件和开发条目文件），然后是一个基本配置文件和通用webpack配置文件。我的要点中没有所有的插件（我还没有设置生产配置），但这应该是一个好的开始。不使用它们背后的原因是什么？这似乎会导致问题，而且你必须依赖于在服务器上使用至少一个插件，并可能通过Babel运行整个代码库。我想这很好，但如果你拉巴贝尔的唯一原因是别名，似乎是很多工作感谢你链接到巴贝尔插件！我没想到会从通俗的角度来看待别名。这对我帮助很大

babel插件网页包别名

起作用，但似乎打破了玩笑。将此插件隔离到Babel的

开发

环境（通过

env

config键）修复了我的问题