导入 mathjax 抛出错误 @types/mathjax/index.d.ts 不是模块

Question

我正在尝试将 MathJax 导入 TypeScript 文件中。

您可以通过以下步骤进行重现：

tsc --init
npm init -y
npm i mathjax @types/mathjax
echo "import { MathJax } from 'mathjax';" > index.ts

我已经尝试了以下所有重要语法：

import { MathJax } from 'mathjax';
import mathjax from "mathjax";
import * as mathjax from "mathjax"
import { * as MathJax } from "mathjax";

但全部返回以下错误：

'../node_modules/@types/mathjax/index.d.ts' is not a module.

我也尝试过像这样mathjax添加（但这也没有帮助）typestsconfig.app.json

"types": [
   "mathjax"
]

相关问题

• 堆栈溢出
  • MathJax 未定义角度 4
  • 在 Typescript/Angular2 组件中使用 MathJax
  • TypeScript 打字给我“index.d.ts 不是一个模块”
• Github 问题
  • Typescript 的简单示例 #2310
  • 如何在 TypeScript 项目中使用 MathJax？第2385章

Answer 1

这个答案是在考虑到在 Web 项目中使用 MathJax 的情况下编写的。如果您不是这种情况，其中大部分内容仍然适用，因为它与您显然使用的 Typescript 相关。

1. MathJax需要在浏览器中下载

无论今天的情况如何，MathJax 过去都是在浏览器中下载的，不应该像其他 npm 包一样导入到针对 Web 的项目中。Installation and use在https://www.npmjs.com/package/mathjax下，您可以看到，如果您正在制作后端 Node 应用程序，则只能在这样的项目中使用 MathJax，否则应在前端导入 MathJax与一个脚本。您可以将自己的 MathJax 副本作为静态文件资源托管在 Web 服务器上，并从script前端的标签中加载它（就像任何 CDN），但您不应该像使用常规 npm 那样将其构建到前端中通过将其导入到源文件中来打包。为什么这很重要？因为它影响了 MathJax 的组织方式，无论是历史上还是现在，这反过来又影响了它在 Typescript 项目中的处理方式。

2.MathJax包

MathJax 有两个版本：MathJax 2 和 3。2 在内部和语法上与版本 3 有很大不同，但尽管建议使用版本 3，但仍然使用。来自 npmjs.org 的软件包mathjax是 MathJax 3 软件包。如果您访问 MathJax Github 存储库，您可以下载较旧的软件包，但我认为它们不能作为 npm 软件包提供。在MathJax 官方页面上，Server integration您可以阅读有关如何在后端下载 MathJax 的信息。您还可以看到有两个 npm 包：mathjax其中mathjax-full后者包含“完整源代码”。MathJax 是使用 Typescript 支持编写的，因此我们可以期望有类型。如果您访问这些包的 npmjs.org 条目（https://www.npmjs.com/package/mathjax和https://www.npmjs.com/package/mathjax-full），您会看到其中包含mathjax-full的类型mathjax不是。这也可以通过期望下载的包来看出node_modules。

那么什么是套餐呢@types/mathjax？嗯，经过检查，我们可以看到它连接到 MathJax 版本 2，因为它的类型声明涉及MathJax.Hub仅在版本 2 中使用的使用。还有它的index.d.ts，当没有更具体的指示时，类型的入口点

import mathjax from "mathjax"

或者

import * as mathjax from "mathjax"

声明一个名称空间，其中包含导出

declare namespace MathJax {
    export ...
    export ...
}

Javascript 中使用命名空间将代码组织到不同的不相交组件中，这是模块的一种早期替代方案，模块在没有命名空间的情况下执行相同的操作。在 Typescript 文档 ( https://www.typescriptlang.org/docs/handbook/modules.html ) 中，它的字面意思是这样的In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module。该包@types/mathjax没有这个，这导致它不是编译器报告的模块。

因此，除了由于版本不同@types/mathjax而未连接到 npm 包mathjax（我知道这是一个糟糕的组织）之外，它也不支持现代模块语法。我想说它也很旧，但它最近才发布，所以坦率地说，我不知道它是关于什么的，也许它与 MathJax 通常导入的方式有关，或者它应该在其他一些非常特殊的环境中工作情况。我所知道的是，根据 Typescript 文档，此类型包不被视为模块（如编译器所示），并且其类型与 MathJax 版本 3 不一致，例如，我绝对不认为有官方隶属关系在此包和它应该支持的包之间。

那么既然mathjax-full我们有类型，对吧？是的，确实如此，但其中的文件组织mathjax-full不适合您的用例。首先，它缺少索引，因此没有合理的入口点可用于import前面描述的那种语句（如上所述，当没有针对特定资源时，自然入口点是索引文件）。包含的内容package.json既不包含包信息，也不包含有关类型的信息（您可以在 中自行检查node_modules）。即使我尝试在没有 Typescript 的情况下使用它，它也会由于require未定义的错误而无法工作。总而言之，这个包并不像您使用的普通 npm 包那样使用；它应该用于那些希望使用 MathJax 源代码的人，而不是在“普通用户构建网络应用程序”用例中。对于这些人来说，MathJax 应该用作一个单独的黑盒项目，通过脚本导入进行访问（同样，由于历史原因......这是 15 年前左右的情况）。

3. 如何让它在您的用例中发挥作用

为了让它在您的用例中工作，我的意思是让您的编译器接受您的导入（没有其他），您可以做一些事情。我这么说是因为我对 Typescript 在这里的工作方式也很感兴趣。

对于@types/mathjax包，您可以进入其index.d.ts并在底部（顶层）node_modules添加。export default MathJax现在该文件具有全局导出，因此导入语句如下

import * as mathjax from "mathjax"
import mathjax from "mathjax"

不会导致您之前看到的投诉。require但由于我之前简要描述的错误，它仍然无法工作。

对于 的情况mathjax-full，通过检查 中的代码，node_modules您可以看到子目录中的源代码中确实存在 Typescript 文件js。但由于不存在索引（也明确提示该包不应通过导入在 Web 项目中使用），默认导入将不起作用（编译器将抱怨类型）。但是，如果您针对特定资产，例如

import { mathjax } from "mathjax-full/js/mathjax"

它会找到相应的类型，并且不会出现错误。然后你实际上得到了某种 MathJax 对象，但我不知道它是否能一直工作（如果你愿意的话可以尝试一下）。此外，我怀疑您会在捆绑包中获得大量额外不需要的文件（或者必须花费大量时间来自定义树摇动），因为 MathJax 用于确定使用时需要哪些文件，并且可能很难捆绑器在构建时确定这一点。

4. 那么你应该如何真正解决这个问题呢？

最好的方法是使用 MathJax 的 React 包。在这里我会推荐我自己的包better-react-mathjax（https://www.npmjs.com/package/better-react-mathjax），但还有其他的。此类包试图弥合 MathJax 和 React 之间的差距，就像您现在遇到的那样。

如果您想以更复杂的方式进行操作，您可以使用 MathJax 包中的源代码，并将它们作为静态文件资源的一部分，然后在 React 中注入一个标记，script该标记从您的 MathJax 启动脚本中获取文件。静态后端。如果您不想托管自己的副本，也可以通过这种方式从 CDN 获取相同的文件。

如果您确实需要在后端使用 MathJax，我会研究该mathjax-full包并尝试转换有关在 Node 中使用它的说明，在官方 MathJax 文档之前指出，针对您的用例，使用显式导入而不是默认导入来获取类型支持。

建议

我代表您发现对代码组织和模块有一定的兴趣（可能是错误的），这是一个复杂的主题。尝试编写自己的包并通过 npm 分发它，以了解 npm、Node、Typescript、ecmascript 模块、commonjs 模块等所扮演的角色。esModuleInterop了解不同的模块格式以及如何使用诸如和 之类的功能在 Typescript 项目中进行交互allowSyntheticDefaultImports也是重要的主题，通过分发您自己的包，您将真正了解项目中源代码和项目中源代码的差异包。