当JS库不提供UMD版本时如何处理动态嵌入script标签获取不到模块化的实例问题
起源是mermaid从10.0版本开始，只导出es版本，不再提供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;
// 做点什么
});