在Node JS Server代码中的Webpack别名

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

我的目录看起来像:

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

在我的webpackconfiguration中,我为客户端中的所有文件夹设置了别名:

 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别名,很自然地说componentscontainers ,节点js要求系统无法parsing它。

我该如何解决这个问题? 我研究了这个问题 ,它讲述了使用mock-require基本设置webpack中存在的相同别名。 但是,那么问题就变成了我的路由文件导入了所有的组件,然后所有的组件都导入样式表,图像等。那么我应该使用类似webpack-isomorphic-tools的东西吗?

我一直在看的指导(例如)都非常擅长显示服务器端的渲染是如何完成的,但是他们中没有一个真正讨论如何解决所有的需求和问题。

与这个问题斗争了两天后,我决定了babel-plugin-webpack-alias。 你需要做什么来解决path是:

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

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

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

编辑:这个工程更好: https : //github.com/jagrem/babel-resolve-relative-module它允许多个path

尝试使用NODE_PATH 。 需求调用期间,节点将始终在此path中查找模块。 它允许按照你的意愿简化你的相对path。

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

有关更多信息,请参阅Node.js文档 。

PS这个东西非常敏感,所以仔细使用它。 现在你的代码严重依赖于环境,可能会在某个地方崩溃。

如果你使用webpack-isomorphic工具,那么它会把你的webpackconfiguration考虑在你的服务器端,这将使所有的别名工作。

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