1

我有一堆扩展名为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 作为返回值的文件来说，这是一个类似的错误：<div> // content </div>指出<在乞求中div是出乎意料的。我认为这是因为它没有将这些文件视为jsx. 我可以设置某种标志来解决这个问题吗？将每个文件更改为 ajsx将是一项任务。

4

2 回答 2

3

看起来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',
})
于 2021-06-28T22:50:16.693 回答
0

当您忘记将 [用于 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

注意：如果您的 npm 版本是 5.2.0 或更高版本，您可以使用npx esbuild代替。./node_modules/.bin/esbuild

构建完成后，您打开index.html[in the browser]，您应该会收到一条错误消息React is not defined.

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

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

import React from 'react';

注意：在使用和不使用 import 指令的情况下运行构建可能会很有用，以查看代码如何随每个构建发生变化。

于 2022-03-01T12:57:24.703 回答