IT技术 - 解析module说明符时出错：从 API 动态导入时做出react - 吾爱随笔录

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

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()
  ]
}

虚拟.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;

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