如何在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项目中有效地使用公共文件夹中的脚本文件。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

基础概念

相关优势

类型与应用场景

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

方法一：通过HTML文件引用

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

遇到的问题及解决方法

问题：脚本未正确加载

示例代码

相关·内容

PS使用教程：如何在Mac版Photoshop中画出对称的图案？

简单快速的安装Swoole扩展

如何使用ArcScript中的格式化器

063_在python中完成输入和输出_input_print

文件夹变exe怎么办？文件夹变exe的数据恢复方法

069_ dir_函数_得到当前作用域的所有变量列表_builtins

070_导入模块的作用_hello_dunder_双下划线

060_汉语拼音变量名_蛇形命名法_驼峰命名法

04、mysql系列之查询窗口的使用

064_命令行工作流的总结_vim_shell_python

055_python编程_容易出现的问题_函数名的重新赋值_print_int

Lightroom Classic教程：如何在Mac Lightroom 中创建黑色电影效果

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐