如何在Create React App中引入自执行第三方JavaScript库

嘿，别发愁！这种没有模块导出、靠全局脚本自动执行的第三方库，在Create React App里完全能搞定，我给你两种实用的方法：

方法一：直接在public/index.html里添加脚本标签 #

这是最贴合原库用法的方式，毕竟它本来就是设计成通过script标签加载的：

1. 打开你的项目根目录下的public/index.html文件
2. 在<body>标签的末尾（或者<head>里，看库的要求）添加脚本标签：

   <!-- 如果是本地文件，把它放在public文件夹下，用%PUBLIC_URL%引用 -->
   <script src="%PUBLIC_URL%/some-library.js"></script>
   <!-- 或者用CDN链接，如果库提供的话 -->
   <script src="https://cdn.example.com/some-library.js"></script>
   

3. 在React组件里使用库的功能：
   因为脚本会自动执行foo()，通常它会把一些功能挂载到window全局对象上。你可以在组件里通过window访问这些全局变量，记得用useEffect确保脚本已经加载完成：

   import { useEffect } from 'react';
   
   function MyComponent() {
     useEffect(() => {
       // 检查库的全局变量是否存在，避免报错
       if (window.someGlobalVariableFromFoo) {
         // 这里就可以使用库的功能啦
         window.someGlobalVariableFromFoo.doSomething();
       }
     }, []);
   
     return <div>你的组件内容</div>;
   }
   
   export default MyComponent;
   

方法二：通过import语句引入（如果库已npm安装） #

既然你已经通过npm/yarn安装了这个库，也可以直接在代码里import它，让Webpack帮你处理加载：

1. 在你的组件或者项目入口文件（比如src/index.js）里添加：

   // 直接import整个库，它会自动执行内部的foo()
   import 'some-library';
   

2. 和方法一一样，之后通过window访问库暴露的全局变量即可，同样建议在useEffect里使用，确保库已经初始化完成。

小提示 #

• 如果用TypeScript，你需要声明全局变量的类型，避免类型报错：

  declare global {
    interface Window {
      someGlobalVariableFromFoo: {
        doSomething: () => void;
      };
    }
  }
  

• 如果不确定库暴露了什么全局变量，可以打开浏览器控制台，输入window查看，或者看库的文档说明。

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