如何通过CDN引入Ant Design预构建React组件？现有方案失效求助

嘿，我帮你搞定这个问题！不用构建工具直接用CDN引入React和Ant Design完全可行，大概率是你引入的顺序不对或者版本不匹配导致的。下面是一套经过验证的完整方案，跟着做就能跑起来：

浏览器加载资源是按顺序来的，依赖项必须先加载，所以顺序一定要对：

• 先引入React和ReactDOM的UMD版本（供浏览器直接使用）
• 然后引入Ant Design的样式文件
• 接着引入Ant Design的UMD版本
• 最后引入babel-standalone（用来解析JSX语法，因为原生浏览器不认识JSX）

这里给你一套稳定匹配的版本组合，直接复制就行：

<!-- React & ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<!-- Ant Design 样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.12.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.12.0/antd.min.css">

<!-- Ant Design JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.12.0/antd.min.js"></script>

<!-- Babel 用来解析JSX -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.6/babel.min.js"></script>

在上述资源之后，添加一个type为text/babel的script标签，这样Babel会自动解析里面的JSX代码。同时要在HTML里准备一个根节点，用来挂载React应用：

<!-- 挂载React应用的根节点 -->
<div id="root"></div>

<script type="text/babel">
  // 从antd中解构出需要的组件
  const { Button, Modal, message } = antd;

  function App() {
    const [isModalOpen, setIsModalOpen] = React.useState(false);

    const showModal = () => {
      setIsModalOpen(true);
      message.success('欢迎使用Ant Design！');
    };

    const handleOk = () => {
      setIsModalOpen(false);
    };

    const handleCancel = () => {
      setIsModalOpen(false);
    };

    return (
      <div style={{ padding: '20px' }}>
        <Button type="primary" onClick={showModal}>
          点击打开模态框
        </Button>
        <Modal title="Ant Design CDN示例" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p>这是通过CDN引入的Ant Design组件，无需Webpack等构建工具！</p>
        </Modal>
      </div>
    );
  }

  // 使用ReactDOM.createRoot挂载应用（React 18的写法）
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
</script>

• 版本匹配：一定要确保React、ReactDOM和Ant Design的版本兼容，上面给出的组合是经过测试的稳定版本，别随便混搭太新或太旧的版本（比如React 15就不支持Ant Design 5）。
• script的type属性：写JSX的script标签必须设置type="text/babel"，否则浏览器会把JSX当成普通JS报错。
• 图标支持：如果需要使用Ant Design的图标，还要额外引入@ant-design/icons的CDN，比如：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/@ant-design/icons/5.2.6/index.umd.min.js"></script>
  

  然后就可以在代码里用const { SmileOutlined } = antdIcons;来使用图标了。
• 生产环境注意：babel-standalone适合开发和演示，生产环境建议还是用构建工具打包，毕竟实时解析JSX会有性能开销。

把这些代码整合成一个HTML文件，直接在浏览器里打开就能看到效果啦！

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