万能的CSDN，有人知道怎样在".qmlproject"文件里面导入".mjs"文件吗？😥

Question

请问有人知道Qt Quick UI Prototype怎样在".qmlproject"文件里面导入".mjs"文件吗？最近在学习qml，买了霍亚飞的书《Qml和Qt Quick快速入门》，在该书对应的源码“2-33/myjs”用Q打开“myjs.qmlproject”却没有加载”factorial.mjs“和”script.mjs“：
项目结构如下及内容：

// myjs.qmlproject
/* File generated by Qt Creator */

import QmlProject 1.1

Project {
    mainFile: "myjs.qml"

    /* Include .qml, .js, and image files from current directory and subdirectories */
    QmlFiles {
        directory: "."
    }
    JavaScriptFiles {
        directory: "."
    }
    ImageFiles {
        directory: "."
    }
    /* List of plugin directories passed to QML runtime */
    // importPaths: [ "asset_imports" ]
}

// factorial.mjs
export function factorial(a) {
    a = parseInt(a);
    if (a <= 0)
        return 1;
    else
        return a * factorial(a - 1);
}

// script.mjs
import { factorial } from "factorial.mjs"
export { factorial }

export function showCalculations(value) {
    console.log(
        "Call factorial() from script.mjs:",
        factorial(value));
}

// myjs.qml:
import QtQuick
import "script.mjs" as MyScript

Item {
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: {
            MyScript.showCalculations(10)
            console.log("Call factorial() from QML:",
                MyScript.factorial(10))
        }
    }
}

Answer 1

引自免费微信小程序：皆我百晓生

要在.qmlproject文件中正确地导入.mjs（JavaScript模块）文件，你需要确保几个关键点：

1. 确保你的环境支持WebAssembly (WASM)，因为.mjs文件是用于WebAssembly的JavaScript模块。
2. 使用Qt 6.x版本，因为从Qt 6开始，对WASM的支持变得更好。
3. 在.qmlproject文件中设置正确的JavaScriptEngines。

根据你的项目结构和需求，可以按照以下步骤操作：

首先，更新.qmlproject文件，添加一个JavaScriptEngines部分，指定要使用的JavaScript引擎。在这里，我们将使用ChakraCore作为JavaScript引擎，因为它在Windows上默认可用，并且与.mjs文件兼容。如果你使用的是其他平台，可能需要调整这个设置。

// myjs.qmlproject
/* File generated by Qt Creator */

import QmlProject 1.1

Project {
    mainFile: "myjs.qml"

    /* Include .qml, .js, and image files from current directory and subdirectories */
    QmlFiles {
        directory: "."
    }
    JavaScriptFiles {
        directory: "."
    }
    ImageFiles {
        directory: "."
    }

    /* Add JavaScript engines */
    JavaScriptEngines {
        engine {
            name: "ChakraCore"
            enabled: true
            qmlEnabled: true
            jsEnginePath: "/path/to/chakra-core"
            # On Windows, the path might be something like this:
            # jsEnginePath: "C:/Program Files/WindowsApps/ChakraCore_1.10.495.0_x64__8wekyb3d8bbwe/AppContainer/App/"
        }
    }

    /* List of plugin directories passed to QML runtime */
    // importPaths: [ "asset_imports" ]
}

请将jsEnginePath替换为你的系统上ChakraCore的实际安装路径。在Windows上，它通常位于%APPDATA%\Microsoft\WindowsApps目录下，但可能因系统而异。

接下来，确认.mjs文件中的导出功能是否正确。根据你的例子，factorial.mjs似乎没有问题，但是为了保险起见，确保它看起来像这样：

// factorial.mjs
export function factorial(a) {
    a = parseInt(a);
    if (a <= 0)
        return 1;
    else
        return a * factorial(a - 1);
}

然后，script.mjs文件也应按预期工作。不过，为了明确性，我建议将其导出重新组织一下：

// script.mjs
import { factorial } from "./factorial.mjs";

export const MyScript = {
    factorial,
    showCalculations: value => {
        console.log(
            "Call factorial() from script.mjs:",
            factorial(value));
    }
};

最后，在.qml文件中，确保正确引用MyScript模块：

// myjs.qml
import QtQuick
import "script.mjs" as MyScript

Item {
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: {
            MyScript.showCalculations(10)
            console.log("Call factorial() from QML:",
                MyScript.factorial(10))
        }
    }
}

现在，你应该可以在Qt Creator中正确地运行并看到输出结果了。记得构建并运行你的项目。如果仍然遇到问题，请检查Qt Creator的配置以及ChakraCore是否已正确安装和启用。