当前位置:  开发笔记 > 编程语言 > 正文

Webpack Aliases在Node JS Server代码中

如何解决《WebpackAliases在NodeJSServer代码中》经验,为你挑选了0个好方法。

我正在构建一个同构的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这样的东西吗?

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

推荐阅读
Gbom2402851125
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有