在create-react-app项目中，如何通过CDN引入JS库并在React组件中调用其方法？

当然有办法啦！我之前也碰到过一模一样的情况——直接在React组件里调用CDN引入的库方法报错，大多是因为库的加载时机没卡对，或者全局变量的访问方式不对。下面给你几个实用的解决方案：

绝大多数CDN引入的JS库，都会把自身挂载到浏览器的window对象上（比如jQuery会变成window.$，Leaflet会变成window.L）。你可以在组件里直接通过window.xxx访问库的方法，但要注意确保库已经加载完成。

举个实际例子，假设你引入的是地图库Leaflet，在map.js里可以这么写：

import React, { useEffect } from 'react';

function MapComponent() {
  useEffect(() => {
    // 用useEffect的空依赖数组，保证只在组件挂载后执行一次
    // 这时候index.html里的CDN脚本已经加载完毕了
    if (window.L) {
      // 调用库的初始化方法
      const map = window.L.map('map-container').setView([39.9042, 116.4074], 11);
      window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    }
  }, []);

  return <div id="map-container" style={{ width: '100%', height: '500px' }}></div>;
}

export default MapComponent;

如果你的CDN链接加载速度慢，或者脚本加了async/defer属性（异步加载），可能会出现组件渲染完成但库还没加载好的情况。这时候可以监听页面的load事件，确保库加载完成后再执行逻辑：

import React, { useEffect } from 'react';

function MapComponent() {
  useEffect(() => {
    function initLibrary() {
      if (window.L) {
        // 这里写库的初始化逻辑
      }
    }

    // 检查页面是否已经加载完成
    if (document.readyState === 'complete') {
      initLibrary();
    } else {
      // 监听load事件，等所有资源加载完再执行
      window.addEventListener('load', initLibrary);
      // 组件卸载时移除监听，避免内存泄漏
      return () => window.removeEventListener('load', initLibrary);
    }
  }, []);

  return <div id="map-container"></div>;
}

如果你的项目用了TypeScript，直接写window.xxx会报类型错误。这时候可以在项目根目录创建一个全局类型声明文件（比如global.d.ts），手动声明全局变量的类型：

declare global {
  interface Window {
    // 这里可以写具体的类型，或者用any临时兼容
    L: any;
    // 如果知道库的类型包，也可以这样写：
    // L: typeof import('leaflet');
  }
}

export {};

写完之后TypeScript就不会再报错了，你依然可以正常通过window.L调用库的方法。

• 如果你给index.html里的CDN脚本加了async或defer，一定要用方案2的方式确保库加载完成后再调用，不然大概率会报“xxx is not defined”的错误。
• 有些小众库可能不会挂载到window上，这时候一定要去看库的官方文档，确认它暴露的全局变量名称是什么。
• 这种CDN方式适合快速原型开发或者小项目，缺点是没法获得代码提示，也没法做Tree Shaking优化体积；如果是大型项目，还是更推荐用npm安装的方式。

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