如何将JS模块（.mjs）导入QML

Question

我按照docs中提供的示例进行操作：

// main.qml
import QtQuick 2.0
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))
    }
  }
}
  

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

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

在 main.qml 上运行 qmlscene 并在窗口上单击鼠标会触发以下错误：  

main.qml:12: TypeError: Property 'showCalculations' of object TypeError: Type error is not a function

预期输出：必须计算阶乘两次并打印到控制台

如果我通过导出

script.mjs

函数来修复

showCalculations

，如下所示：

export function showCalculations(value) {

我只计算了一次阶乘，但预期计算了两次。输出如下：

qml: Call factorial() from script.js: 3628800
main.qml:13: TypeError: Property 'factorial' of object TypeError: Type error is not a function

我还尝试将

script.mjs

重命名为

script.js

，但这会破坏 import Factorial.js，因此没有帮助。

还有一个问题是，文档指出“有时需要在导入上下文中提供函数，而无需对其进行限定。在这种情况下，ECMAScript 模块和 JavaScript 导入语句应在没有

as

限定符的情况下使用。 ”

我尝试过：

import "script.mjs"

但是我收到错误：

main.qml:4 Script import requires a qualifier

预期：导入必须没有问题，并且可以在没有限定符的情况下调用

showCalculations()

和

factorial()

。

我为它创建了一个bug，但是可能需要很长时间才能让人们看到它。也许这里有人知道如何获得文档中描述的确切行为。我需要导入 ECMAScript 模块，而不仅仅是 JS 文件。

Answer 1

有点晚了（但总比没有好！），但问题的解决方案非常简单。

您需要在

export

中重新

factorial

script.mjs

。

如果您想在

js

文件上使用正常的

script

扩展名，那么您需要以旧方式进行导入：

.import "factorial.mjs" as F

var factorial = F.factorial