新手求助：引入CDN后如何创建React/React-Bootstrap JS模块

你当前的问题核心是：通过CDN引入的UMD格式库会挂载到window全局对象，但模块脚本（data-type="module"）需要标准的ES模块导入语法，不想直接使用window.React这类写法。下面提供两种解决方案：

方案一：基于现有全局变量转换为标准写法 #

既然库已经挂载到window，可以在模块脚本开头直接从window中提取所需对象，之后就能用标准语法编写代码：

修改后的script.js：

// 从window提取全局变量，转换为模块内的局部变量
const { React, ReactDOM } = window;
const { ProgressBar } = window.ReactBootstrap;

class Hello extends React.Component {
  render() {
    return <h1>hello H1</h1>;
  }
}

class Prog extends React.Component {
  render() {
    return <ProgressBar now={60} id='myPB'/>;
  }
}

// 用标准变量名调用渲染方法
ReactDOM.render(<Hello />, document.getElementById('el1'));
ReactDOM.render(<Prog />, document.getElementById('el2'));

这种方法不需要修改HTML中的CDN链接，快速适配现有代码结构。

方案二：改用ES模块CDN链接（推荐学习标准写法） #

现代CDN提供了ES模块版本的库，配合importmap可以实现完全标准的ES模块导入，更贴近实际开发中的React项目写法：

第一步：修改index.html的CDN链接和添加importmap #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 添加importmap映射，简化模块导入路径 -->
    <script type="importmap">
      {
        "imports": {
          "react": "https://cdn.jsdelivr.net/npm/react@18/+esm",
          "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18/+esm",
          "react-bootstrap": "https://cdn.jsdelivr.net/npm/react-bootstrap@2/+esm"
        }
      }
    </script>
    <title>Hello React!</title>
  </head>
  <body>
    <div id="root">
      <div id="el1"></div>
      <div id="el2"></div>
    </div>
    <script type="text/babel" data-type="module" src="/script.js"></script>
  </body>
</html>

第二步：修改script.js为标准ES模块语法 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ProgressBar } from 'react-bootstrap';

class Hello extends React.Component {
  render() {
    return <h1>hello H1</h1>;
  }
}

class Prog extends React.Component {
  render() {
    return <ProgressBar now={60} id='myPB'/>;
  }
}

// React 18推荐的createRoot渲染方式
const rootEl1 = ReactDOM.createRoot(document.getElementById('el1'));
rootEl1.render(<Hello />);

const rootEl2 = ReactDOM.createRoot(document.getElementById('el2'));
rootEl2.render(<Prog />);

这种方案完全遵循ES模块规范，不需要依赖全局变量，适合学习React的标准开发模式。

内容的提问来源于stack exchange，提问作者rss181919