如何在QML中正确导入JS模块(.mjs)并实现官方文档的调用效果

一、解决函数调用报错、实现两次阶乘输出 #

第一次报错是因为.mjs作为ES模块，默认所有内部定义都是私有，只有显式export的成员才允许外部访问，你最初的script.mjs没有导出showCalculations，所以QML找不到该函数。
后续只导出showCalculations但报factorial不存在，是因为你从factorial.mjs导入的factorial仅在script.mjs内部可见，没有对外导出。

修改script.mjs代码，显式导出所有需要暴露给QML的方法即可：

// script.mjs
import { factorial } from "factorial.mjs"
// 导出当前文件定义的方法
export function showCalculations(value) {
  console.log(
   "Call factorial() from script.js:",
   factorial(value));
}
// 把导入的factorial方法重新导出，供QML调用
export { factorial }

修改后运行代码即可得到预期的两次阶乘打印结果。

二、实现无限定符调用导入的函数 #

你遇到的Script import requires a qualifier报错是Qt 5的原生限制：Qt 5的QML引擎对ES模块的导入支持存在缺陷，文档中描述的无别名导入仅在Qt 6.2及以上版本实装可用。
如果你的项目可以升级到Qt 6，直接使用import "script.mjs"语法即可无需加限定符直接调用模块导出的所有函数。
如果必须使用Qt 5，可以用两种方案实现相同效果：

方案1：作用域绑定 #

导入模块后将需要调用的方法绑定到当前QML组件的作用域：

// main.qml
import QtQuick 2.0
import "script.mjs" as MyScript
Item {
  width: 100; height: 100
  // 绑定方法到当前组件作用域，后续可直接调用
  property var showCalculations: MyScript.showCalculations
  property var factorial: MyScript.factorial
  MouseArea {
    anchors.fill: parent
    onClicked: {
      showCalculations(10)
      console.log("Call factorial() from QML:", factorial(10))
    }
  }
}

方案2：JS垫片文件 #

如果需要在多个QML文件中无限制调用，可创建普通.js垫片文件，开头加"use module"声明开启ES模块支持，避免重命名为.mjs带来的导入限制：

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

配合作用域绑定使用即可。

内容的提问来源于stack exchange，提问作者rightaway717