EsBuild StartService 替换答案

【问题标题】：EsBuild StartService replacementEsBuild StartService 替换
【发布时间】：2021-03-10 11:21:17
【问题描述】：

我是 esBuild 和 ReactJS 的新手，我决定按照 guid 构建一个自定义 CLI Transpiling 应用程序。我的意思是我在 textarea 中输入文本，但在客户端的控制台上出现以下错误消息主机版本“0.8.27”与二进制版本“0.9.0”不匹配。我知道我使用的是旧版本，我确实尝试通过查看文档来首先找到解决问题的方法，因为他们已经完全抛弃了新版本上的 startService() 方法。但是我找不到任何可能的解决方案来解决我的问题，有没有知识的人可以帮助我解决问题。这是我必须开始转译的代码：

const startService = async () => {
ref.current = await esbuild.startService({
  worker: true,
  wasmURL: '/esbuild.wasm'
})
  }

 useEffect(() => {
    startService()
  }, [])

  const onClick = async () => {
    if (!ref.current) {
      return;
    }
    const result = await ref.current.build({
      entryPoints: ['index.js'],
      bundle: true,
      write: false,
      plugins: [unpkgPathPlugin()]
    })
    console.log(result );
    setCode(result)
  }

【问题讨论】：

标签： reactjs esbuild

【解决方案1】：

在浏览器中运行 esbuild 的文档在这里：https://esbuild.github.io/api/#running-in-the-browser。在 0.9.0 版本中，esbuild.startService() 变为 esbuild.initialize() 和 service.build() 变为 esbuild.build()（即显式服务对象消失了）。所以更新后的代码可能看起来像这样：

const startService = async () => {
  await esbuild.initialize({
    worker: true,
    wasmURL: '/esbuild.wasm'
  })
  ref.current = true
}

useEffect(() => {
  startService()
}, [])

const onClick = async () => {
  if (!ref.current) {
    return;
  }
  const result = await esbuild.build({
    entryPoints: ['index.js'],
    bundle: true,
    write: false,
    plugins: [unpkgPathPlugin()]
  })
  console.log(result);
  setCode(result)
}

【讨论】：

我遇到了同样的问题，我用esbuild.initialize 替换了esbuild.startService，以便找到该部分，现在我面临的唯一问题是ref.current 即将出现未定义.知道是什么原因造成的吗？
esbuild.initialize 函数不返回任何内容。不再有办法获取服务对象的句柄。

【解决方案2】：

请注意，在浏览器中运行时没有可用的异步 API。此外，我不想每次在编辑时热重新加载时都抛出“已经初始化”。我是这样设置的：

import { useState, useEffect } from 'react';
import './App.css';
import * as esbuild from 'esbuild-wasm';

function App() {
  const [input, setInput] = useState('');
  const [code, setCode] = useState('');

  useEffect(() => {
    // This ugly code is to avoid calling initialize() more than once
    try {
      esbuild.build({});
    } catch (error) {
      if (error instanceof Error && error.message.includes('initialize')) {
        esbuild.initialize({
          worker: false,
          wasmURL: '/esbuild.wasm',
        });
      } else {
        throw error;
      }
    }
  }, []);

  const onClick = () => {
    esbuild
      .transform(input, {
        loader: 'jsx',
        target: 'es2015',
      })
      .then((result) => {
        setCode(result.code);
      });
  };

  return (
    <div className="App">
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}></textarea>
      <div>
        <button onClick={onClick}>Submit</button>
      </div>
      <pre>{code}</pre>
    </div>
  );
}

export default App;

【讨论】：