[UE] Issue: 使用nodejs后端时，node_modules的存放位置

[llint]

前置阅读 | Pre-reading

• 文档/Doc
• Issues
• FAQ

Puer的版本 | Puer Version

1.0.9

UE的版本 | UE Version

5.7.1

发生在哪个平台 | Platform

Editor(win)

错误信息 | Error Message

Error: can not find @protobufjs/aspromise in D:/Projects/CoreGame/node_modules/protobufjs/src/util

问题重现 | Bug reproduce

CoreGame 是一个UE5.7.1的项目，集成了PureTS在Plugins目录下，JsEnv.Build.cs配置（使用NodeJs backend）：

    private SupportedV8Versions UseV8Version = 
#if UE_4_25_OR_LATER
        SupportedV8Versions.V9_4_146_24;
#else
        SupportedV8Versions.VDeprecated;
#endif

    private bool UseNodejs = true;

    private bool Node16 = true;

    private bool UseQuickjs = false;

    private bool QjsNamespaceSuffix = false;

    private bool WithFFI = false;
    
    private bool ForceStaticLibInEditor = false;

    private bool ThreadSafe = false;

    private bool FTextAsString = true;
    
    private bool bEditorSuffix = true;

    // v8 9.4+
    private bool SingleThreaded = false;
    
    public static bool WithSourceControl = false;

    public bool WithByteCode = false;

    private bool WithWebsocket = false;

系统node/npm版本：
$ node --version
v22.21.1
$ npm --version
10.9.4

因为项目需要，需要使用protobufjs库，在项目根目录（CoreGame）的node_modules下能够发现protobufjs及相关依赖正常安装，使用protobufjs的方式如下（使用Mixin方式加载）：

import { toDelegate } from 'puerts';
import * as UE from 'ue'

import { load } from "protobufjs";  // <---------------------------------- 应该是这里对应的JavaScript解析node_modules出错

interface GM_NscmSessionTest_C extends UE.Game.TestMaps.GM_NscmSessionTest.GM_NscmSessionTest_C {}

class GM_NscmSessionTest_C {
    NscmSession: UE.NscmSession

    ReceiveBeginPlay() {
        console.log(`****************** GM_NscmSessionTest_C.ReceiveBeginPlay: from GM_NscmSessionTest_C.ts`);
        this.Print("****************** GM_NscmSessionTest_C.ReceiveBeginPlay: from GM_NscmSessionTest_C.ts");
        let NscmSessionSubsystem = UE.SubsystemBlueprintLibrary.GetGameInstanceSubsystem(this.GetWorld(), UE.NscmSessionSubsystem.StaticClass()) as UE.NscmSessionSubsystem
        this.NscmSession = NscmSessionSubsystem.CreateNscmSession("127.0.0.1", 8888)
        function OnMessage(session: UE.NscmSession, msg: ArrayBuffer) {
            let u8a1 = new Uint8Array(msg);
            // todo: this should be a protobuf message, so use protobufjs to unmarshal it
        }
        this.NscmSession.SetOnMessageDelegate(toDelegate(this, OnMessage))

        load("Proto/HeartBeat.proto", function (err, root) { // <============== this should trigger protobufjs library resolution, and thus the error
            if (err)
                throw err;

            // Lookup types (no package name in your proto)
            const HeartBeatRequest  = root.lookupType("HeartBeatRequest");
            const HeartBeatResponse = root.lookupType("HeartBeatResponse");

            // ----------------------------
            // Encode HeartBeatRequest
            // ----------------------------
            const requestPayload = {
                key: "conn-12345",
                time: Date.now()          // int64
            };

            // Optional but recommended
            const reqErr = HeartBeatRequest.verify(requestPayload);
            if (reqErr)
                throw Error(reqErr);

            const requestMessage = HeartBeatRequest.create(requestPayload);
            console.log("requestMessage =", requestMessage);

            const requestBuffer = HeartBeatRequest.encode(requestMessage).finish();
            console.log("requestBuffer =", Array.prototype.toString.call(requestBuffer));

            // ----------------------------
            // Decode HeartBeatRequest
            // ----------------------------
            const decodedRequest = HeartBeatRequest.decode(requestBuffer);
            console.log("decodedRequest =", decodedRequest);

            // Convert to plain object (important for int64)
            const requestObject = HeartBeatRequest.toObject(decodedRequest, {
                longs: String,
                defaults: true
            });
            console.log("requestObject =", requestObject);

            // ----------------------------
            // Encode HeartBeatResponse
            // ----------------------------
            const responsePayload = {
                key: requestObject.key,
                time: Date.now()
            };

            const responseMessage = HeartBeatResponse.create(responsePayload);
            const responseBuffer = HeartBeatResponse.encode(responseMessage).finish();

            // ----------------------------
            // Decode HeartBeatResponse
            // ----------------------------
            const decodedResponse = HeartBeatResponse.decode(responseBuffer);
            const responseObject = HeartBeatResponse.toObject(decodedResponse, {
                longs: String,
                defaults: true
            });

            console.log("responseObject =", responseObject);
        });
    }

    ReceiveTick() {
        console.log("ReceiveOnTick ...")
    }

    ReceiveEndPlay() {
        this.NscmSession.Shutdown()
    }
}

export { GM_NscmSessionTest_C }

几个问题吧：

1. node_modules的位置：currently it's under the project root directory (CoreGame), 但是实际运行的时候（either under PIE or packaged game），我猜测node_modules somehow 应该在CoreGame/Content/JavaScript目录下面，然而文档里面我并没有找到当使用NodeJs backend的时候，有什么额外的步骤来将项目根目录下的node_modules目录引入到CoreGame/Content/JavaScript目录下面？或者有什么其他的设置可以让实际生成的JavaScript代码来找到protobufjs库和相关依赖？
2. PuerTS内部使用NodeJs应该是Node16？但是我的系统NodeJs的版本是22（如上面所示），不同的Node版本安装的protobufjs包是否可以在不同的NodeJs版本之间使用？
3. 目前我对整体TypeScript/JavaScript生态还不是很熟，但是我比较好奇，为什么最终生成的在CoreGame/Content/JavaScript目录下的代码还是找到了根目录下面的node_modules目录？是在哪里配置了吗？
4. 因为我的报错信息还是在PIE模式下运行的时候出现的，那么如果在打包的时候，可能会更需要protobufjs在正确的位置才能在最终运行时正确加载使用，那这个其实和第一个问题是强相关的：使用nodejs后端的时候需要如何保证node_modules能够在packaged game模式下能够被正确找到？

谢谢解答！

[chexiongsheng]

你代码调用的require会先调用nodejs的require，如果nodejs的require加载失败会进入puerts的加载逻辑。
nodejs的require的规则看nodejs的文档。
puerts的js模块加载主要看传入的ILoader，你可以实现ILoader接口并传入，来实现你任意的加载js模块方式。
如果你不实现，则用这个默认的简单实现：https://github.com/Tencent/puerts/blob/master/unreal/Puerts/Source/JsEnv/Private/DefaultJSModuleLoader.cpp

[llint]

当我尝试把“CoreGame/node_modules”目录拷贝到“CoreGame/Content/JavaScript”目录下，发现上述错误消失；

基于DefaultJSModuleLoader::Search的逻辑，应该是当其他路径搜索失败后，最终会在"Content/JavaScript/node_modules"目录下寻找相应的模块，因为我拷贝了node_modules，因此搜索成功。

而DefaultJSModuleLoader::Search的逻辑似乎是如果require的路径里面带有/，则只会在当前路径下搜索，不会向上搜索，但是protobufjs里面会有require("@protobufjs/aspromise")这样的require使用方式，因此就首先只在当前目录（这里的当前目录其实是最外层require("protobufjs")的时候，正常向上搜索node_modules，在CoreGame根目录下找到了，但是protobufjs内部又使用了require("@protobufjs/aspromise")这样的方式）下找这个模块，当然找不到，但是此时好像不会往父目录搜索，最后的fallback是在"Content/JavaScript/node_modules"里面搜索，所以看来node_modules确实需要放在"Content/JavaScript"这个目录下。

那可能最后的问题是：

1. 拷贝"CoreGame/node_modules"到"CoreGame/Content/JavaScript"目录下是否是推荐的方式？
2. “CoreGame/Content/JavaScript”下的node_modules目录下的内容应该会被正确的package是吗？（暂时还没有尝试打包）

[chexiongsheng]

为什么要拷贝呢？Content就是运行目录，直接在运行目录安装不就可以了吗？你放上层目录能行只是有个往上搜索的过程。
能不能打包看你项目设置。

[llint]

因为我最初的TypeScript和Node的设置是在根目录，这个设置是基于官方puerts_unreal_demo来的，因此我会认为在根目录设置是官方推荐的方式。

[llint]

我又看了一下puerts_unreal_demo，发现根目录下有package.json，在Content/JavaScript下面也有一个package.json（如截图所示），两个package.json文件内容还不一样；根目录下的package.json应该是可以由npm install xxx生成或者修改，但是Content/JavaScript目录下的package.json文件是如何生成和维护的呢？我试着在Content/JavaScript目录下运行npm install protobufjs --save，但是并没有在该目录下生成额外的package.json文件以及对应的node_modules目录，这个Content/JavaScript/package.json文件是否需要手工编辑生成？(please bear with my very limited TypeScript / JavaScript knowledge)

[chexiongsheng]

因为我最初的TypeScript和Node的设置是在根目录，这个设置是基于官方puerts_unreal_demo来的，因此我会认为在根目录设置是官方推荐的方式。

根目录是给ts工程用的，这可以只安装声明，如果那个模块声明和js是分开的两个包的话。
Context下是运行时用的。
声明和js的关系，你可以粗暴理解为c++头文件和lib/so文件的关系。

[llint]

Now it makes perfect sense, thanks!