katex 作为 webpack 外部加载答案

【问题标题】：katex to load as webpack externalskatex 作为 webpack 外部加载
【发布时间】：2020-07-27 10:35:34
【问题描述】：

我正在尝试在标记编辑器中获取 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(/^\$\$[\s\S]*\$\$$/)) {
    expr = expr.substr(2, expr.length - 4);
    return katex.renderToString(expr, { displayMode: true });
  } else if (expr.match(/^\$[\s\S]*\$$/)) {
    expr = expr.substr(1, expr.length - 2);
    return katex.renderToString(expr, { isplayMode: false });
  }
}

但我想将 katex 作为单独的模块加载，所以我尝试使用 webpack 中的外部组件：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>

我想我在这里遗漏了一些东西......你能帮我吗？谢谢

【问题讨论】：

你能把webpack创建的const katex = require('katex'); // external贴出来吗？没有映射的捆绑包？至少生成 katex 的__webpack__require____ 命令？
另外，html中../katex/katex.min.js的脚本标签是否定义在生成的主块入口点的脚本标签之前？否则window.katex 可能会在require('katex') 运行后生成
var katex = __webpack_require__(/*! katex */ \"katex\"); // 外部的，是的，katex.min 放在头部.. 主要入口点在 body 的末尾！
您运行的是什么版本的 katex？在最新的katex.min.js 的路径是：node_modules\katex\dist\katex.min.js
version: "0.12.0" .. 我已经下载到本地并使用 ../katex/katex.min.js

标签： webpack katex

【解决方案1】：

你可以试试：

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。

【讨论】：

是的，我试过了......在尝试 root、common、amd 之前......
控制台中的窗口是否可以使用 katex？
不走运，试过 "window.katex": "katex" & "katex": "window.katex"，
为了看到 external 配置实际上被 webpack 捕获，您应该在 main.js 或您的第一个块或 webpack 引导块中看到字符串 external "katex"。在里面你应该看到eval("module.exports = katex;")
eval("module.exports = WEBPACK_EXTERNAL_MODULE_katex;\n\n//# sourceURL=webpack://BREM/external_%22katex%22?");我有这个。