如何在create-react-app中使用公共文件夹中的脚本？

在create-react-app项目中使用公共文件夹（通常是public文件夹）中的脚本，可以通过以下几种方式实现：

基础概念

create-react-app是一个用于快速搭建React应用的脚手架工具，它提供了一个public文件夹，用于存放不需要经过Webpack处理的静态资源，如图片、字体文件等。这些文件在构建过程中会被复制到输出目录（通常是build文件夹）的根目录下。

类型与应用场景

脚本文件：如JavaScript文件，可以在HTML中直接引用。
样式文件：如CSS文件，可以通过<link>标签引入。
图片和字体：可以直接通过相对路径引用。

如何在create-react-app中使用公共文件夹中的脚本

方法一：通过HTML文件引用

在public/index.html文件中，你可以直接通过<script>标签引用public文件夹中的脚本文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... 其他头部信息 ... -->
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 引用公共文件夹中的脚本 -->
    <script src="%PUBLIC_URL%/scripts/myScript.js"></script>
</body>
</html>

方法二：通过环境变量引用

如果你需要在JavaScript代码中动态引用公共文件夹中的脚本，可以使用环境变量process.env.PUBLIC_URL。

const scriptUrl = `${process.env.PUBLIC_URL}/scripts/myScript.js`;
const script = document.createElement('script');
script.src = scriptUrl;
document.head.appendChild(script);

遇到的问题及解决方法

问题：脚本未正确加载

原因：可能是路径错误或者构建过程中文件未被正确复制。

解决方法：

检查路径：确保%PUBLIC_URL%或process.env.PUBLIC_URL正确指向了公共文件夹。
清理缓存：有时候浏览器缓存会导致脚本未更新，尝试清除缓存或使用无痕模式查看效果。
重新构建：运行npm run build重新构建项目，确保文件被正确复制。

示例代码

假设你在public/scripts文件夹中有一个名为myScript.js的脚本文件，以下是如何在React组件中动态加载它的示例：

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const scriptUrl = `${process.env.PUBLIC_URL}/scripts/myScript.js`;
    const script = document.createElement('script');
    script.src = scriptUrl;
    script.async = true;
    document.head.appendChild(script);

    // 清理函数
    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

通过以上方法，你可以在create-react-app项目中有效地使用公共文件夹中的脚本文件。