esbuild + es module 实现极简 CLI

前端项目往往需要在浏览器中查看最终展示效果，而且随着模块化技术的发展，这个事情变得也更加复杂，现在可以记住 webpack、vite 等工具实现开发环境的页面预览等。

总的来说开发模式下做了两个事情： 1. 启动本地服务（Http 或 Https） 2. 构建模块化的脚本，其中可能包括将 TS 编译为 JS，将 JS 文件中的 CSS 文件提取等。

基于这两个特点，可以在 ESM 的基础上对实现进行简化。 1. 针对外部以来，可以通过 esm.sh 提供的方式进行引入。 2. 在本地通过 Node.js 启动 Http 服务，同时通过 esbuild 将项目中的文件进行构建。

React 19 移除了 UMD 模块的文件，如果通过 script 标签加载 React，推荐使用 esm.sh 的 CDN 加载方式。

<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@19.2.0",
      "react-dom/": "https://esm.sh/react-dom@19.2.0/"
    }
  }
</script>
<script type="module">
  import React from "react"
  import ReactDOMClient from "react-dom/client"
</script>

因为通过 script 标签加载了 React 和 ReactDomClient，所以在第二步通过 esbuild 构建项目代码时需要对 React 和 ReactDomClient 做 extrnal 处理。

function runBuild() {
  build({
    entryPoints: ['./src/index.tsx'],
    outfile: './public/bundle.js',
    bundle: true,
    format: 'esm',
    external: ['react', 'react-dom']
  })
}

本地 http 服务启动可以通过 http-server 模块实现。

function runServer() {
    const server = createServer({
        root: "./public",
        showDir: true,
        autoIndex: false,
        gzip: true,
        brotli: true,
    })
    const PORT = 5173
    server.listen(PORT)
    console.log("Server is listen on port: " + PORT)
}

完整实例可访问：oasis-cloud/ultra-minimal-cli