使用 ReactJS.NET 构建 Esbuild？

Question

TL;DR 如何使用 esbuild with 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期望？ - 这有可能吗？

谢谢，弗莱明

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

使用 ReactJS.NET 构建 Esbuild？

Esbuild with ReactJS.NET?

javascript

reactjs

reactjs.net

esbuild