[英]MathJax with WebPack ReferenceError: require is not defined
I would like to put formulas in my webpage, which uses (dotnet Kestrel).我想将公式放在我的网页中,该网页使用 (dotnet Kestrel)。 I do not want to load javascript libraries from the net, so I am using webpack and npm for my packages.我不想从网络加载 javascript 库,所以我使用 webpack 和 npm 作为我的包。 My problem is, that I find it impossible to load MathJax.我的问题是,我发现无法加载 MathJax。 I have tried the following:我尝试了以下方法:
import 'mathjax-full';
require('mathjax-full'); // << not the error itself
import MathJax from 'mathjax-full';
The most annoying error that I get is this:我得到的最烦人的错误是:
ReferenceError: require is not defined
I must do something obviously wrong.我必须做一些明显错误的事情。 The error message comes from the MathJax internals.错误消息来自 MathJax 内部。 I have also tried to import requirejs
, as some forums mentioned that as some kind of "workaround".我也尝试导入requirejs
,因为一些论坛提到这是某种“解决方法”。 The error I get with it is when I run WebPack:我在运行 WebPack 时遇到的错误是:
ERROR in ./node_modules/requirejs/bin/r.js 1:0
Module parse failed: Unexpected character '#' (1:0)
Has anybody succeeded with MathJax on WebPack?有没有人在 WebPack 上使用 MathJax 成功?
I've encountered the same problems as you plus a million more.我遇到了和你一样的问题,再加上一百万。 MathJax is really not WebPack-friendly. MathJax 真的不是 WebPack 友好的。
My solution for Angular:我的 Angular 解决方案:
npm install --save mathjax
Extend the "scripts"
array of angular.json
with:使用以下命令扩展angular.json
的"scripts"
数组:
"node_modules/mathjax/es5/tex-mml-chtml.js"
And now to call MathJax APIs, DO NOT use import
of any kind.现在要调用 MathJax API,不要使用任何类型的import
。 The mathjax
module sets its main
to es5/node-main.js
, which uses an ugly hack to call require()
at runtime, which is the ultimate source of trouble you saw. mathjax
模块将其main
设置为es5/node-main.js
,它使用一个丑陋的 hack 在运行时调用require()
,这是您看到的最终麻烦来源。
Instead, do this:相反,请执行以下操作:
declare var MathJax;
Now you may complain that this way you have no type information.现在你可能会抱怨这样你就没有类型信息。 Well, the fact is that not even mathjax-full
has good type information for methods inside this global object: they inject the methods (such as MathJax.typeset()
) at runtime and their types are declared using [name: string]: any;
好吧,事实是,即使mathjax-full
也没有关于这个全局对象内方法的良好类型信息:它们在运行时注入方法(例如MathJax.typeset()
),并且它们的类型使用[name: string]: any;
. .
If your really want type information, you're probably better off declaring it yourself, eg:如果你真的想要类型信息,你最好自己声明它,例如:
declare interface MathJaxGlobal {
typeset(elems: HTMLElement[]);
}
declare var MathJax: MathJaxGlobal;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.