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

Question

我有一堆扩展名为 js 而不是 jsx 的文件。（这是一个反应项目）。

我使用这样的脚本设置我的 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 作为 return 的文件来说，这是一个类似的错误：<div> // content </div> 说明 < 在 div 出乎意料。我认为这是因为它没有将这些文件视为 jsx。我可以设置某种标志来解决这个问题吗？将每个文件更改为 jsx 将是一项任务。

Answer 1

看起来 esbuild docs 中有一个语句：（链接块的底部）

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

Answer 2

当您忘记将[用于 React 库的] 导入指令添加到您的组件文件时，也会发生这种情况。

例如，假设您有一个具有以下结构的 React 应用程序：

.
+-- index.html
+-- index.js
+-| src
    +-- app.js
    +-| components
        +-- my-component.js
+-| dist
    +-- bundle.js

以及以下文件内容：

<!-- index.html -->
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

// index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './src/app';

ReactDOM.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>,
    document.querySelector('#root')
);

// ./src/app.js

import Banner from './components/my-component';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello World</h1>
      </header>
      <main>
        <Banner/>
      </main>
    </div>
  );
}

export default App;

// .src/components/my-component.js

function MyBanner(){
  return (
    <h3>My Banner!</h3>
  );
}

export default MyBanner;

要将您的 React 应用程序与 ESBuild 捆绑在一起，您可能会运行像这样：

npx esbuild index.js --bundle --loader:.js=jsx --out-file=./dist/bundle.js

Note: You can use npx esbuild instead of ./node_modules/.bin/esbuild if your npm version is 5.2.0 or higher.

构建完成后，您打开 index.html [在浏览器中]，您应该会收到一条错误消息 React is not defined。

原因是在./src/app.js和./src/components/my-component.js中没有React的import指令。因此，当 JSX 在构建过程中转换为 React.createElement 时，当您的 bundle 在浏览器中执行时，没有对 React 的声明和可访问引用；因此错误。

要解决此问题，请在两个文件的顶部添加导入指令。

import React from 'react';

Note: It might be useful to run your build with and without the import directive to see how the code changes with each build.

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

configuring esbuild with react (replacing create-react-app)

reactjs

esbuild