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

Question

我正在尝试从 API 动态导入 React 组件库。成功获取js文件。 babel 转译也成功了。如果我像 import Dummy from './components/js/Dummy.js' 这样从本地主机动态导入 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",
    })
  ]
};

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

Error resolving module specifier: react while doing dynamic import from API

reactjs

rollup

rollupjs

dynamic-import