用 ReactJS.NET 构建 Esbuild？答案

【问题标题】：Esbuild with ReactJS.NET?用 ReactJS.NET 构建 Esbuild？
【发布时间】：2021-12-13 14:21:14
【问题描述】：

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 教程here，设置如下：

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-config here，有这个输出设置：

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

在 esbuild 中镜像这个将使用 iife 和 esbuild.globalName = 'this'，但它会引发错误：

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

Esbuild 非常严厉地指出它是一个捆绑器（不是一个转译和连接器），那么我将如何调整 Esbuild 以使该捆绑包将 global 对象更改为 React.NET 所期望的？ - 甚至有可能吗？

谢谢，弗莱明

【问题讨论】：

标签： javascript reactjs reactjs.net esbuild

【解决方案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})`,
    },
})

【讨论】：