当JS库不提供UMD版本时如何处理动态嵌入script标签获取不到模块化的实例问题

开始

仍然使用mermaid作为案例。

使用ESModule

文档告诉我们可以向script标签添加属性来让现代浏览器识别

html 复制代码

<script type="module">
import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.1.0/mermaid.esm.min.mjs';

// 做点什么
</script>

这种方式会出现一些麻烦事：

原本不是ESModule的环境获取不到对应库的实例，无法使用。而通过向window挂载属性又不太合适。
如果这个标签是动态嵌入页面的，它对应的onload事件不会正确触发。

假设提供umd版本，动态嵌入的代码是这样的

js 复制代码

const mermaidScript = document.createElement('script');
mermaidScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.4.0/mermaid.min.js';

mermaidScript.onload = () => {
  // 做点什么
};

document.head.appendChild(mermaidScript);

那么可以改成这样去使用

js 复制代码

import("mermaid.esm.min.mjs").then((module) => {
  const mermaid = module.default;
  // 做点什么
});

这样及避免模块化实例污染全局，同时可以在常规的JavaScript环境中优雅的使用ESModule。

不过这种写法打包工具会提示错误，像vite

按照提示改造

js 复制代码

import(/* @vite-ignore */  "mermaid.esm.min.mjs").then((module) => {
  const mermaid = module.default;
  // 做点什么
});

当JS库不提供UMD版本时如何处理动态嵌入script标签获取不到模块化的实例问题

开始

使用ESModule

评论区

历史记录