如何在 reactjs 组件中使用使用 scalajs 导出的函数？

如何解决如何在 reactjs 组件中使用使用 scalajs 导出的函数？

我尝试使用 main.js 注释将一些函数导出到 scalajs 中的 @JSExportTopLevel 文件，如 Export Scala.js APIs to JavaScript scalajs 文档中所述，并按照 main.js 的解释构建 main.js 3}}。

这会产生 main.js，我可以从中使用 Scalajs 代码中导出的函数。

现在我想在我的 reactjs 组件中使用这些导出的函数。为此，我尝试了以下步骤：

1. 复制 public 文件夹中的 index.html 文件
2. 在 <script type="text/javascript" src="./main.js"></script> 中包含 javascript 文件，如下所示：

console.log(foo());

现在，如果我在浏览器中加载应用程序并尝试在浏览器控制台中使用这些功能，它可以正常工作：

import React from 'react';

const RuleEditor = () => {

    console.log(foo());

    return (
        <>
        </>
    );
};

export default RuleEditor;

但我不是在 reactjs 组件中使用这些函数：

foo is not defined  no-undef

我总是收到以下编译错误：

window

我确实理解 reactjs 无法识别该函数，因为我还没有真正指定从何处获取该函数，但我不确定如何实现它。我已经阅读了其他一些 stackoverflow 帖子，其中有一些建议可以在 rules: [ { test: /\.(ts)$/,use: 'ts-loader',exclude: /node_modules/,},{ exclude: /node_modules/,test: /\.scss$/,use: [ MiniCssExtractPlugin.loader,'css-loader',MediaQueryPlugin.loader,'sass-loader',],svgRule,imgRule,fontRule,] 对象中的何处查找它，但我没有在那里找到这些函数。

请提出在 reactjs 组件中使用从 scalajs 导出的函数的正确方法。 TIA。

解决方法

将对象/类/函数导出为顶级导出会将它们置于 Javascript 全局范围内。

class Foo(val x: Int) {
  @JSExport
  def square(): Int = x*x // note the (),omitting them has a different behavior
  @JSExport("foobar")
  def add(y: Int): Int = x+y
}

您可以在嵌入在 html 或 scalajs 中的脚本中使用这些函数，如 here 所示。

但是如果你需要在 nodejs 应用中使用这些函数，你需要从一个模块中导出这些函数。我们需要在 build.sbt 中添加以下内容。阅读更多here。

scalaJSLinkerConfig ~= { _.withModuleKind(ModuleKind.ESModule) }

现在，我们可以通过像这样导入它们来在 nodejs 应用程序中使用导出的函数：

import { square,add } from './main'

如果您希望从名为 main 以外的模块导出这些函数，请为每个导出的函数提供模块 ID，如下所示：

class Foo(val x: Int) {
  @JSExport("square","my-math")
  def square(): Int = x*x // note the (),omitting them has a different behavior
  @JSExport("foobar","my-math")
  def add(y: Int): Int = x+y
}

并像这样使用它：

import { square,add } from './my-math'