如何在ReactJS.NET项目中配置使用esbuild作为打包工具？

该需求完全可以实现。出现Expected identifier but found "this"报错的原因是：esbuild的globalName参数作用是指定打包产物导出内容挂载的全局变量名，要求必须是合法的JavaScript标识符，和webpack的globalObject参数作用完全不同，不能直接照搬webpack配置。

以下是两种可行的配置方案： #

方案1：最小改动适配现有入口代码 #

你已经在入口文件中手动完成了全局变量挂载逻辑，只需要调整esbuild配置让global关键字指向正确的全局对象即可，不需要设置globalName：

// esbuild 配置文件
require('esbuild').buildSync({
  entryPoints: ['你的入口文件路径.jsx'],
  bundle: true,
  format: 'iife',
  define: {
    // 同时兼容浏览器端与ReactJS.NET服务端渲染的全局上下文
    global: 'this'
  },
  outfile: '打包输出路径.js',
  // 其他原有配置，如loader规则、压缩配置等保持不变
})

该方案完全复用你现有的入口代码，不需要做任何修改，打包后即可正常将React、ReactDOM、ReactDOMServer挂载到全局对象上，符合ReactJS.NET的要求。 #

方案2：无需手动编写挂载逻辑的配置实现 #

如果你不想在入口文件中编写全局挂载代码，可以通过esbuild的inject配置自动注入挂载逻辑：

1. 新建全局挂载脚本react-global-inject.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import RootComponent from './home.jsx';

Object.assign(this, {
  React,
  ReactDOM,
  ReactDOMServer,
  Components: { RootComponent }
})

2. 调整esbuild配置：

require('esbuild').buildSync({
  entryPoints: ['你的入口文件路径.jsx'],
  bundle: true,
  format: 'iife',
  inject: ['./react-global-inject.js'],
  outfile: '打包输出路径.js',
  // 其他原有配置保持不变
})

内容的提问来源于stack exchange，提问作者gnimmelf