Блог

Главная - Вопросы по программированию - Rollup: не удается заставить react-native-web работать с сборкой IIFE

Rollup: не удается заставить react-native-web работать с сборкой IIFE

#javascript #reactjs #react-native #rollupjs #react-native-web

#javascript #reactjs #react-native #rollupjs #react-native-web

Вопрос:

Я пытаюсь создать встроенное react-native-web приложение для чата, которое будет использоваться в различных веб-приложениях. Я смог iife выполнить сборку, но не смог запустить ее в create-react-app приложении.

Сначала я получал Uncaught ReferenceError: require is not defined из-за iife включения var reactNative = require("react-native-web/dist/index");

Затем я загрузился Require.js через CDN, но теперь он не может сопоставиться react-native-web/dist/index и возвращает следующую ошибку:

Uncaught Error: Module name "react-native-web/dist/index" has not been loaded yet for context: _. Use require([])

Есть ли какая-то дополнительная конфигурация, которую необходимо обработать, чтобы добавить react-native-web модуль в пакет?

index.html - <head> 

 <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>

rollup.config 

 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',
    ],
  },