如何使用其他文件的JS函数/变量？及src/index.re调用src/util.js方法

嘿，我来帮你搞定在ReasonML文件里调用JS函数和变量的问题！刚好你有src/util.js和src/index.re的场景，我一步步给你讲清楚：

第一步：确保JS文件的函数/变量已导出 #

首先得确认你的src/util.js里的辅助函数和变量是导出状态，这样外部文件才能访问。比如你的util.js可能是这样的：

// src/util.js
// 导出一个加法函数
export function calculateSum(a, b) {
  return a + b;
}

// 导出一个常量
export const DEFAULT_TIMEOUT = 5000;

如果是用CommonJS规范（比如Node.js环境），也可以这样写：

// src/util.js
module.exports = {
  calculateSum: function(a, b) { return a + b; },
  DEFAULT_TIMEOUT: 5000
};

第二步：在ReasonML文件中声明外部依赖 #

ReasonML是静态类型语言，所以需要用[@bs.module] external语法来声明要导入的JS实体，同时指定类型签名（这一步很重要，能帮你提前规避类型不匹配的错误）。

在src/index.re里这样写：

// src/index.re
// 导入util.js中的calculateSum函数，指定类型：接收两个int，返回int
[@bs.module "./util"] external calculateSum: (int, int) => int = "calculateSum";

// 导入util.js中的DEFAULT_TIMEOUT常量，类型为int
[@bs.module "./util"] external defaultTimeout: int = "DEFAULT_TIMEOUT";

这里的几个关键点：

• [@bs.module "./util"]：指定要导入的JS模块路径（相对当前index.re的位置，所以用./util即可）
• external：告诉ReasonML这是一个外部JS实体，不是Reason内部定义的
• 类型签名：比如(int, int) => int表示这个函数接收两个整数参数，返回整数，你需要根据JS函数的实际逻辑调整类型
• 最后的字符串"calculateSum"：对应JS文件里导出的函数名称，如果Reason里的变量名和JS导出名一致，也可以写成""简化，但明确写出来更清晰

第三步：像使用普通Reason代码一样调用 #

现在你可以直接在index.re里调用这些JS函数和变量了，和使用原生Reason函数完全一样：

// src/index.re
// 调用JS函数
let total = calculateSum(10, 20);
Js.log(total); // 控制台输出30

// 使用JS常量
Js.log(defaultTimeout); // 控制台输出5000

额外情况：处理默认导出 #

如果你的util.js用的是默认导出（比如export default function xxx()），那导入方式稍有不同：

// src/util.js
export default function multiply(a, b) {
  return a * b;
}

对应的Reason导入：

[@bs.module "./util"] external multiply: (int, int) => int = "default";

这里用"default"来对应JS的默认导出。

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