使用ReactJS.NET进行Esbuild

Question

TL；DR如何将esbuild与ReactJS.NET一起使用？

---

长版本

ReactJS.NET期望从"；束"：

React.Exceptions.ReactNotInitialisedException: 'React has not been loaded correctly: missing (React, ReactDOM, ReactDOMServer). Please expose your version of React as global variables named 'React', 'ReactDOM', and 'ReactDOMServer'

我一直不清楚Webpack到底做了什么，但看看这里的ReactJS.NET Webpack教程，这是设置：

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import RootComponent from './home.jsx';
global.React = React;
global.ReactDOM = ReactDOM;
global.ReactDOMServer = ReactDOMServer;
global.Components = { RootComponent };

在这里的示例webpack配置中，还有以下输出设置：

{
[...]
globalObject: 'this',
}

在esbuild中镜像它将使用iife和esbuild.globalName = 'this'，但它会抛出一个错误：

> (global name):1:0: error: Expected identifier but found "this"
1 │ this

Esbuild非常严厉，因为它是一个bundler(而不是transfile和concatenator)，所以我该如何调整Esbuild，使bundle将global对象更改为React.NET所期望的？-这可能吗？

谢谢，Flemming

Answer 1

找到了一个解决方案。

import { build } from 'esbuild'
const globalName = 'whatever'
build({
[...]
format: 'iife',
globalName,
footer: {
// Important! Assigns the raw export of the bundle to whatever `this` is in the given context
js: `Object.assign(this, ${globalName})`,
},
})