时间戳

首页 > 解决方案 > 带有 WebPack ReferenceError 的 MathJax：未定义要求

javascript - 带有 WebPack ReferenceError 的 MathJax：未定义要求

问题描述

我想将公式放在我的网页中，该网页使用（dotnet Kestrel）。我不想从网上加载 javascript 库，所以我使用 webpack 和 npm 作为我的包。我的问题是，我发现无法加载 MathJax。我尝试了以下方法：

import 'mathjax-full';
require('mathjax-full'); // << not the error itself
import MathJax from 'mathjax-full';

我得到的最烦人的错误是：

ReferenceError: require is not defined

我必须做一些明显错误的事情。错误消息来自 MathJax 内部。我也尝试过 import requirejs，因为一些论坛提到这是某种“解决方法”。我得到的错误是当我运行 WebPack 时：

ERROR in ./node_modules/requirejs/bin/r.js 1:0
Module parse failed: Unexpected character '#' (1:0)

有人在 WebPack 上成功使用 MathJax 吗？

标签： javascriptwebpackmathjax

解决方案

我遇到了和你一样的问题，再加上一百万。MathJax 真的不是 WebPack 友好的。

我对 Angular 的解决方案：

npm install --save mathjax

扩展"scripts"数组angular.json：

"node_modules/mathjax/es5/tex-mml-chtml.js"

现在调用 MathJax API，不要使用import任何类型的 API。该mathjax模块将其设置main为es5/node-main.js，它使用丑陋的 hackrequire()在运行时调用，这是您看到的最终麻烦源。

相反，请执行以下操作：

declare var MathJax;

现在你可能会抱怨这样你没有类型信息。好吧，事实是这个全局对象中的方法甚至mathjax-full没有好的类型信息：它们在运行时注入方法（例如MathJax.typeset()），并且它们的类型使用[name: string]: any;.

如果您真的想要类型信息，您最好自己声明它，例如：

declare interface MathJaxGlobal {
  typeset(elems: HTMLElement[]);
}
declare var MathJax: MathJaxGlobal;

推荐阅读