javascript - Webpack 与 Nodejs 同构 require 带绝对路径

标签 javascript node.js reactjs webpack isomorphic-javascript

目标:我正在尝试在 nodejswebpack 中设置一个项目,以便 require 函数可以使用项目目录作为根目录,所以我可以在两种环境中要求相对于项目根目录的绝对路径(同构使用,即 React 服务器+客户端渲染)。

情况:在 webpack 中,您可以设置 config.resolve.root 使其工作,但在 nodejs 中,最好不要覆盖/修改 global.require。

建议 1:我可以创建一个新的全局函数

global.p_require

所以它在 Node 中工作;但是,我无法找到一种方法让 webpack 在不更改 webpack 源代码的情况下将“p_require”解析为 __webpack_require__

建议 2:我可以创建一个新的全局变量

global.ROOT_DIR = process.cwd()

所以它在 Node 中工作

require(ROOT_DIR + <relative path to root>);

然而,webpack 会将其识别为动态要求。有没有办法让 webpack 解析 ROOT_DIR?我已经尝试过 Define Plugin,但它似乎在 webpack 解析 require 后加载。

问题

有人有解决方案或遇到同样的问题吗?

最佳答案

我通过让 webpack 做更多来解决这个问题;它不是“Node 和 webpack”,而是“webpack:客户端和服务器”。我让 webpack 为客户端构建并为服务器构建(后者在配置中使用“Node ”作为其目标属性)。自定义 webpack 用于 require 的目录很容易,所以你让它完成它的工作并为 Node 创建一个构建。

在服务器上渲染时,您只需要编译的服务器构建。如果您需要将一些东西从服务器传递到 webpack 构建的应用程序,请将其连接到您用于服务器构建的入口点——webpack 会将其构建为 commonJs 模块,因此您的入口点可以导出任何内容是服务端需要渲染时最方便的接口(interface)。

关于javascript - Webpack 与 Nodejs 同构 require 带绝对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31711290/

相关文章:

javascript - 使用 Reactjs 清除输入字段?

javascript - 如何解决跨源读取阻止 (CORB) 阻止的跨源响应和跨源错误

javascript - SVG 的 x,y 属性真的有效吗?

javascript - css 删除 Logo 周围的虚线

javascript - 使用原型(prototype)的最佳方式 [OOP]

node.js - NodeJS http 获取超时

javascript - 在 ReactJS 中获取请求

javascript - jQuery 插件 - 从插件内调用公共(public)方法

node.js - 从运行在不同端口的 Vue 应用程序调用 Node 快速服务器 API

json - 对于这个错误: require ('connect' ). json()未定义我该怎么办