解析模块说明符时出错：从 API 进行动态导入时做出反应

Question

我正在尝试从 API 动态导入反应组件库。 js文件获取成功。 babel 转译也成功了。如果我像import Dummy from './components/js/Dummy.js' 这样从localhost 动态导入Dummy.js 文件，它可以工作。但是 API 导入失败并出现以下错误。 react lazy 也会出现同样的错误。我基本上想动态加载库并向其发布事件。我是反应和前端开发的新手。如果这太愚蠢了，请原谅！。

Error resolving module specifier: react 

我的 App.js

import React, { lazy, Suspense } from 'react';
import './App.css';
import ErrorBoundary from './ErrorBoundary';

class App extends React.Component {

render(){

    const loader = () => import( /*webpackIgnore: true*/ `https://example.com/Dummy.js`);
    const Dummy = ReactDynamicImport({ loader });


    const LoadingMessage = () => (
      "I'm loading..."
    )

    return (
    <div className="App">
      <h1>Simplewidget</h1>
      <div id="simplewidget">
      <ErrorBoundary>
      <Suspense fallback={LoadingMessage}>
        <Dummy />
        </Suspense>
        </ErrorBoundary>
      </div>
    </div>
    );
  }
}

export default App;

rollup.config.js，经过多次尝试，我到达了下面的配置https://github.com/jaebradley/example-rollup-react-component-npm-package/blob/master/rollup.config.js

// node-resolve will resolve all the node dependencies
import resolve from '@rollup/plugin-node-resolve';

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import filesize from 'rollup-plugin-filesize';
import localResolve from 'rollup-plugin-local-resolve';

export default {
  input: 'src/components/js/Dummy.js',
  output: {
    file: 'dist/Dummy.js',
    format: 'es',
    globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
  },
  // All the used libs needs to be here
  external: [
    'react',
    'react-dom'
  ],
  plugins: [
  babel({
    exclude: 'node_modules/**',
  }),
  localResolve(),
  resolve({
    browser: true,
  }),
  commonjs(),
  filesize()
  ]
}

Dummy.js。我在 dist/dummy.js 中验证了 babel 转译发生正确。我将转换后的版本上传到我的静态托管网站。

import React from "react";
import ReactDOM from "react-dom";

class Dummy extends React.Component {

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}

export default Dummy;

我有不同的目标要在同一个应用程序中构建、启动我的服务器、创建汇总包等。所以，我非常有信心我的汇总不会干扰应用程序的运行。

Answer 1

汇总捆绑配置不正确。我试图用 commonjs 插件创建一个 es 输出，而实际上我需要一个 esm 模块。 'react' 的错误是因为它没有解决。必须在进行汇总捆绑时使用 window.React。此外，应将 App.js 卷成 esm 包，以使其动态导入 Dummy.js。在包含 app.js 包的 HTML 中，我必须包含 react 和 react js umd 脚本。

export default {
  input: "./src/components/js/Dummy.js",
  output: {
    file: './dist/Dummy.js',
    format: 'esm'
   },
   plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    resolve(),
    externalGlobals({
    "react": "window.React",
    "react-dom": "window.ReactDOM",
    })
  ]
};