reactjs - 使用 React 配置 esbuild(替换 create-react-app)

Question

我有一堆扩展名为 js 的文件而不是 jsx . (这是一个 react 项目)。

我使用这样的脚本设置我的 package.json 以进行构建:

"build": "esbuild src/App.js --bundle --minify --sourcemap --outfile=public/bundle.js",

运行它后，我有很多错误都在提示 js语法如:

const App = () => {
 return (
  <>
   // some code
  </>
 )
}

哪里:

> src/App.js:16:2: error: Unexpected "<"
    16 │     <>
       ╵     ^

对于许多返回基本 div 的文件，这是一个类似的错误:<div> // content </div>说明 <在乞求div出乎意料。我认为这是因为它没有将这些文件视为 jsx .我可以设置某种标志来解决这个问题吗？将每个文件更改为 jsx将成为一项使命。

Answer 1

看起来esbuild中有语句docs : (链接 block 的底部)

esbuild app.js --bundle --loader:.js=jsx

--loader:.js=jsx 语句将在 js 文件上使用 jsx 加载器

因此您的脚本可能类似于:

"build": "esbuild src/App.js --bundle --minify --sourcemap --outfile=public/bundle.js --loader:.js=jsx",

文档指出您也可以在配置脚本中而不是 CLI 中执行此操作:

require('esbuild').buildSync({
  entryPoints: ['app.js'],
  bundle: true,
  loader: { '.js': 'jsx' },
  outfile: 'out.js',
})