Node.js 和前端之间共享的模块中的模块语法和依赖关系

Posted 2023-03-07

【中文标题】Node.js 和前端之间共享的模块中的模块语法和依赖关系

【英文标题】：Module syntax and dependencies in modules shared between Node.js and frontend

【发布时间】：2014-11-06 10:25:20

【问题描述】：

我开始了解 node.js 和 javascript 前端，并且在前端和后端之间共享模块/组件（在这种情况下是带有 express 的 Node.js）变得有趣（尤其是在使用 React.js 时）。这不是一个新问题，但是我一直无法找到适合我当前需求的好方法。

我想要什么：

在前端和 Node 后端使用项目模块和子模块，并在 require 语句中使用工作路径，并尽可能少地加载文件/模块的样板代码。希望不需要构建步骤。

例如，我有一个用于渲染 html 的 react 组件。该组件在 webapp 处于活动状态时在前端使用，在预生成 html 时在后端使用。这只是一个示例案例，主要要求如上所述。

最佳案例，项目模块文件（非实际测试代码）：

var React = require('react'),
    MyLocalSubmodule = require('path/modulename');

var ThisComponent = React.createClass(
    /* ...something.... */
);

module.exports = ThisComponent;

问题：

如果我使用纯 CommonJS 语法，如标准节点模块（无定义和 module.export），语法非常好用，但模块不能在前端开箱即用，除非我使用 browserify、webpack 等构建前端代码。这不是一个大问题，但我希望减少所需的构建步骤的数量，以便可以尽可能多地直接使用代码。

问题：是否有任何前端加载器可以运行解包的 CommonJS 模块，而无需预先构建它们，并且模块文件中没有任何样板或类似的 hack？

如果我使用一些类似于 AMD 的语法来定义和返回，很容易让它们在节点上工作（使用 requirejs、amdefine 或 somilar 模块），但是我遇到了模块路径的问题。如果我在前端使用 baseUrl 配置 require.js，我可以通过 require 配置中的路径包含项目模块文件。当我需要包含另一个模块（如子 React 组件）时，我还需要在 require-config 中定义该模块的路径。到目前为止，一切都很好。然后，如果我尝试在 node/express 上运行此模块，则渲染第一个模块工作（基于 express 视图路径），但要求第一个模块中的子模块不起作用，因为 require 然后查找相对的本地模块当前模块目录的路径，而不是基于快速视图路径的路径。如果我将相对路径放置到子组件（如 require('./subdir/mySubmodule') 或 require('../otherdir/mySubmodule)），那么它在前端的 Require.js 中不起作用。如果我在要求名称中不包含任何目录指示（如 require('path/to/component')），我还没有找到任何方法告诉 Node 在给定路径中查找，因此我可以以相同的方式拥有一个固定的基本目录就像在 require.js 前端一样。 （注意：我想避免设置像 NODE_PATH 这样的环境变量来解决节点路径问题）。而且，我还没有找到一种方法来在浏览器中的 require.js 上使用相对于当前模块文件的路径（Node 的方式）。

问题：是否有一种非hackish的好方法来要求在require语句中具有相同名称语法的模块内的本地（项目）模块和子模块（var myModule = require（'frontend-backend-shared-syntax ');) 在前端和 Node 后端？

最后一个问题：制作节点/前端可共享项目模块（包括使用子模块）的最佳建议方法是什么？

【问题讨论】：

你看过 Browserify 吗？

是的，但正如帖子中所述，我希望避免额外的构建步骤。

【参考方案1】：

您可以使用 Browserify API 按需捆绑 JavaScript。

有几个开源项目可以让你做到这一点（例如https://www.npmjs.org/package/browserify-middleware）。

要在一个模块中创建包含浏览器和节点代码的模块，您可以在 package.json 文件中指定“浏览器”属性。 Browserify 将使用指定的文件作为浏览器代码的入口点，而 node 将加载“main”中指定的文件。