使用react配置esbuild（替换create-react-app）

Question

我有一堆扩展js名为jsx. （这是一个反应项目）。

\n

我使用这样的脚本设置我的 package.json 来构建：

\n

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

\n

运行它后，我遇到了大量错误，所有错误都抱怨js语法，例如：

\n

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

在哪里：

\n

> src/App.js:16:2: error: Unexpected "<"\n    16 \xe2\x94\x82     <>\n       \xe2\x95\xb5     ^\n

对于许多具有基本 div 作为返回的文件来说，这是一个类似的错误：<div> // content </div>指出<the 的开头div是意外的。我认为这是因为它没有将这些文件视为jsx. 我可以设置某种标志来解决这个问题吗？将每个文件更改为 ajsx将是一项任务。

\n

Answer 1

看起来文档中有一个声明esbuild ：（链接块的底部）

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

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

所以你的脚本可能看起来像这样：

"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',
})