Javascript 汇总：无法使用IIFE生成获取react本机web

我正在尝试创建一个嵌入式

react原生web

聊天应用程序，用于各种web应用程序。我能够汇总

iife

构建，但无法在

createreact应用程序中运行它

起初，我得到了
Uncaught ReferenceError:require没有定义，因为
iife
包括
var reactNative=require（“react native web/dist/index”）

然后，我通过CDN加载了
Require.js
，但现在它无法映射到
react native web/dist/index
，并返回以下错误：

Uncaught错误：尚未为上下文加载模块名“react native web/dist/index:\。使用require（[]）

要将
react native web
模块添加到捆绑包中，是否需要处理一些额外的配置

index.html-

<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.production.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/react-is/17.0.1/umd/react-is.production.min.js"
  integrity="sha512-etfv1dN8QdfqT1mzQZvN+oIRU5LF9V6WfMi1F3VX73isn1VL6sQlD+ZYVFEz5DkuDxZiZ1uAuG6YHZGQjKPdWw=="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
  integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.6.5/minified.min.js"
  integrity="sha512-hwpeHYS0iTo4+TF2CNZuWx2hehKCZsXdFdpGSOs3d375W2ko/6k+mQdgqvbCOQ9Y/YH45wD9wX+4tSGVPxTQxQ=="
  crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script>
<script src="js/chat.js"></script>

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import svgr from '@svgr/rollup';
import image from '@rollup/plugin-image';
import globals from 'rollup-plugin-node-globals';
import builtins from 'rollup-plugin-node-builtins';
import { terser } from 'rollup-plugin-terser';

{
    input: 'src/index.js',
    output: {
      file: 'dist/iife/chat.js',
      format: 'iife',
      name: 'ChatApp',
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
      sourcemap: true,
    },
    plugins: [
      resolve({
        browser: true,
      }),
      commonjs({
        include: /node_modules/,
      }),
      json(),
      babel({
        babelHelpers: 'runtime',
        extensions: ['.web.jsx', '.web.js', '.jsx', '.js'],
        presets: [['@babel/preset-env', { modules: false }], '@babel/react'],
        plugins: [
          ['react-native-web'],
          [
            'babel-plugin-styled-components',
            {
              isNative: true,
            },
          ],
          [
            '@babel/plugin-transform-runtime',
            {
              regenerator: true,
            },
          ],
          ['transform-remove-console'],
          [
            'transform-react-remove-prop-types',
            {
              removeImport: true,
              ignoreFilenames: ['node_modules'],
            },
          ],
        ],
        babelrc: false,
      }),
      image({
        exclude: ['**/*.svg'],
      }),
      svgr({ native: false }),
      globals(),
      builtins(),
    ],
    external: [
      '@babel/runtime',
      '@react-native-community/async-storage',
      'react',
      'react-dom',
      'react-native',
      'react-native-svg',
      'styled-components',
    ],
  },