Webpack Aliases在Node JS Server代码中

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需要系统无法解决它.

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

我一直在看的指南(例如这个)都非常擅长展示服务器端渲染是如何完成的,但它们都没有真正谈论如何解决所有需求和诸如此类的东西.

Answer 1

在与这个问题斗争了 2 天之后，我决定使用 babel-plugin-webpack-alias。 您需要做的是解决路径问题：

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

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

Answer 2

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

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