377 - 《2023 年最潮的 Demo 编写方式》
发布于 2023年11月23日
1、今天看到 https://github.com/esm-dev/esm.sh/releases/tag/v135 esm.sh run，想着去年写的这篇 76 - 《2022 最潮的 Demo 编写方式》 是时候该更新了。
2、基于 esm.sh run 的最简 HTML 如下。支持 JSX、TS、TSX 等。
<!DOCTYPE html>
<html>
<script type="importmap">
{
"imports": {
"@jsxImportSource": "https://esm.sh/react@18.2.0",
"react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
}
}
</script>
<script type="module" src="https://esm.sh/run" defer></script>
<div id="root"></div>
<script type="text/babel">
import { createRoot } from "react-dom/client";
const App = () => <div>Hello World</div>;
createRoot(globalThis.root).render(<App />);
</script>
</html>
注：React 19 不提供 UMD 包，只提供 ESM。试了下，把上面的 18.2.0 换成 19.0.0-rc-58af67a8f8-20240628 照样能跑。
3、原理要结合 https://github.com/esm-dev/esm.sh/blob/main/run.ts 和 https://github.com/esm-dev/esm.sh/blob/main/build.ts 看。找到所有 type 属性在白名单的 script 标签，依次执行；但由于写