katex作为webpack外部加载



我正试图在标记的编辑器中获取Katex,https://github.com/markedjs/marked/issues/1538从上面的链接中获取代码,效果很好!

const marked = require('marked');
const katex = require('katex');  // external
const renderer = new marked.Renderer();
function mathsExpression(expr) {
if (expr.match(/^$$[sS]*$$$/)) {
expr = expr.substr(2, expr.length - 4);
return katex.renderToString(expr, { displayMode: true });
} else if (expr.match(/^$[sS]*$$/)) {
expr = expr.substr(1, expr.length - 2);
return katex.renderToString(expr, { isplayMode: false });
}
}

但我想将katex作为单独的模块加载,所以我尝试使用webpack中的externals:https://webpack.js.org/configuration/externals/

output: {
path: PATH(isDev),
filename: "bundle.js",
library: "BUNDLE",
libraryExport: "default",
libraryTarget: "umd",
globalObject: "this",
},
externals: {
katex: {
root: "katex",
commonjs2: "katex",
commonjs: "katex",
amd: "katex",
},
},

但是上面代码中的katex是未定义的,但它在HTML文件外部是可用的。由于我添加了katex js文件

<script
src="../katex/katex.min.js"
integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
crossorigin="anonymous"
></script>

我想我错过了什么。。。你能帮我一下吗。感谢

你能试试吗:

externals: {
katex: "katex"
},

注意">katex">

拜托?


我用文件创建了一个本地演示:

-webpack.config.js

-src

--index.js

-dist

--index.html

文件:

webpack.config.js:

const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
externals: {
katex: "katex"
}
};

src/index.js

var katex = require("katex");
export function foo() {
console.log(katex);
}
foo();

index.html:

<!doctype html>
<html>
<head>
<title>External Demo</title>
<script
src="../node_modules/katex/dist/katex.min.js"
></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

控制台中的结果:{version: "0.12.0", render: ƒ, renderToString: ƒ, ParseError: ƒ, __parse: ƒ, …}然后我可以在foo函数中使用katex。

相关内容

  • 没有找到相关文章

最新更新