如何在浏览器中在线编译代码

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';

import { transform } from './esbuild';

async function bootstrap() {
  const render = await transform({
    entry: 'main.ts',
    files: {
      'App.tsx': `
        import React, { useState } from 'react';
        
        import './App.css';
        
        const App: React.FC = () => {
          const [count, setCount] = useState(0);
          return (
            <div className='App'>
              <h1>Hello World</h1>
              <p>Count: {count}</p>
              <button onClick={() => setCount(C => C + 1)}>increment</button>
              <button onClick={() => setCount(C => C - 1)}>decrement</button>
            </div>
          )
        };
        
        export default App;
      `,
      'App.css': `
        .App {
          margin: 0;
          padding: 0;
          color: red;
        }
      `,
      'main.ts': `
        import React from 'react'
        import ReactDOM from 'react-dom/client'
        import App from './App.tsx'
        
        ReactDOM.createRoot(document.getElementById('app')!).render(
          <React.StrictMode>
            <App />
          </React.StrictMode>
        )
      `,
    },
    dependencies: {
      react: React,
      'react-dom': ReactDOM,
      'react-dom/client': ReactDOMClient,
    },
  });

  render();
}

bootstrap();

/** VFS 配置 */
interface VFSOptions {
  /** VFS 根目录 */
  root?: string;
  /** 文件列表 */
  files: Record<string, string>;
}

class VFS {
  // 根目录
  private root: string;

  // 文件列表
  private files: Record<string, string> = {};

  /** 虚拟文件系统 */
  constructor(options: VFSOptions) {
    const { root = '.', files = {} } = options;

    this.root = root;

    // 初始化文件路径
    this.files = Object.keys(files).reduce((allFiles, path) => {
      const normalizedPath = this.normalizePath(path);
      allFiles[normalizedPath] = files[path];
      return allFiles;
    }, {});
  }

  /** 统一文件路径 */
  public normalizePath(path: string): string {
    // ./utils.ts → /utils.ts
    let normalizedPath = path.startsWith(this.root)
      ? path.substring(this.root.length)
      : path;

    // 确保所有路径都是以 / 开头
    if (!normalizedPath.startsWith('/')) {
      normalizedPath = '/' + normalizedPath;
    }

    // 处理全部带 ./ 的路径
    normalizedPath = normalizedPath.replace(/^\.\/+/, '/');

    return normalizedPath;
  }

  /** 读文件 */
  public readFile(path: string) {
    const normalizedPath = this.normalizePath(path);
    return this.files[normalizedPath];
  }

  /** 写文件 */
  public writeFile(path: string, content: string) {
    const normalizedPath = this.normalizePath(path);
    this.files[normalizedPath] = content;
  }
}

export default VFS;

import * as ESBuild from 'esbuild-wasm';

// 引入工具方法
import VFS from './vfs';

/** 代码编译配置 */
interface TransformOptions {
  /** 入口文件名 */
  entry: string;
  /** 待编译文件 */
  files: Record<string, string>;
  /** 依赖 */
  dependencies?: Record<string, any>;
}

/** 是否已加载 */
let initialized = false;

/** 全局加载实例 */
let initPromise: Promise<void> | null = null;

/** 初始化 ESBuild */
async function initialize() {
  // 已加载则不重复加载
  if (initialized) return;

  // 全局共用一个加载实例，防止重复加载
  if (initPromise === null) {
    initPromise = ESBuild.initialize({
      worker: true,
      wasmURL: new URL(
        '/node_modules/esbuild-wasm/esbuild.wasm',
        import.meta.url
      ),
    });
  }

  try {
    // 等待加载完成
    await initPromise;

    initialized = true;
    console.log('ESBuild init success');
  } catch (e) {
    console.log('ESBuild init failure', e);
  }
}

initialize();

/** 代码编译 */
export async function transform(options: TransformOptions) {
  try {
    // 等待初始化完成
    await initialize();

    // 录入虚拟文件系统
    const vfs = new VFS({ files: options.files });

    // 编译代码
    const { outputFiles = [] } = await ESBuild.build({
      bundle: true,
      format: 'cjs',
      target: 'es6',
      platform: 'browser',
      entryPoints: [options.entry],
      plugins: [
        {
          name: 'compile-in-browser',
          setup: build => {
            // 处理各类文件的依赖、引入关系
            build.onResolve({ filter: /.*/ }, args => {
              const { kind, path } = args;
              const { dependencies = {} } = options;

              switch (kind) {
                // 入口文件路径解析
                case 'entry-point': {
                  return { path: vfs.normalizePath(path) };
                }
                // 引入文件
                case 'import-statement': {
                  // 依赖解析
                  if (dependencies[path]) {
                    return { path, external: true };
                  }

                  // 本地文件解析
                  if (vfs.readFile(path)) {
                    return { path: vfs.normalizePath(path) };
                  }

                  return null;
                }
                default: {
                  return null;
                }
              }
            });

            // 读取 js/jsx/ts/tsx 对应的文件内容
            build.onLoad({ filter: /.(j|t)sx?/ }, args => ({
              loader: 'tsx',
              contents: vfs.readFile(args.path) || '',
            }));

            // 读取 css 文件内容并转换为 style 样式
            build.onLoad({ filter: /.css/ }, args => {
              const cssFile = vfs.readFile(args.path) || '';

              if (cssFile) {
                // 处理文件名，./App.css → App.css
                const fileName = vfs
                  .normalizePath(args.path)
                  .replace(/^\//, '');
                const fileContents = [
                  '(() => {',
                  `  let style = document.querySelector("style[data-file='${fileName}']");`,
                  '  if (!style) {',
                  `    style = document.createElement('style');`,
                  '    style.type = "text/css";',
                  `    style.setAttribute("data-file", ${JSON.stringify(fileName)});`,
                  '    document.head.appendChild(style);',
                  '  }',
                  `  style.innerHTML = ${JSON.stringify(cssFile)};`,
                  '})()',
                ].join('\n');

                return {
                  loader: 'js',
                  contents: fileContents,
                };
              }

              return null;
            });
          },
        },
      ],
    });

    const compiledCode = outputFiles[0].text;

    console.log('Code compile success', compiledCode);

    // 包装 require 方法注入传入的依赖
    const requireFn = (dependency: string) => {
      const dependencies = options.dependencies || {};
      return dependencies[dependency];
    };
    const compiledFn = new Function('require', compiledCode);

    return () => compiledFn(requireFn);
  } catch (e) {
    console.log('Code compile failure', e);
  }
}