React项目中app.js无法加载外部JS文件的问题求助

一、直接通过import导入（推荐） #

这是最符合React/webpack构建逻辑的方式，直接在index.js或App.js顶部导入脚本文件：

// index.js 或 App.js
import './assets/vendor/jquery/jquery.min.js';
import './assets/vendor/jquery.easing/jquery.easing.min.js';
import './assets/vendor/php-email-form/validate.js';
import './assets/vendor/waypoints/jquery.waypoints.min.js';
import './assets/vendor/isotope-layout/isotope.pkgd.min.js';
import './assets/vendor/venobox/venobox.min.js';
import './assets/vendor/owl.carousel/owl.carousel.min.js';
import './assets/vendor/aos/aos.js';
import './assets/js/main.js';

注意事项：jQuery全局变量问题 #

如果依赖jQuery的插件需要全局$或jQuery变量，需配置webpack注入全局变量：

• 若已eject项目，在webpack.config.js中添加：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

• 若使用Create React App未eject，可通过craco配置：
  1. 安装依赖：npm install @craco/craco --save-dev
  2. 创建craco.config.js：

const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        })
      ]
    }
  }
};

3. 修改package.json的启动脚本为craco start、craco build等。

二、动态创建Script标签加载 #

适合需要控制脚本加载顺序或条件加载的场景，在App.js中使用useEffect动态生成脚本：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 导入所有脚本的URL（webpack会自动处理打包路径）
    const scriptUrls = [
      require('./assets/vendor/jquery/jquery.min.js').default,
      require('./assets/vendor/jquery.easing/jquery.easing.min.js').default,
      require('./assets/vendor/php-email-form/validate.js').default,
      require('./assets/vendor/waypoints/jquery.waypoints.min.js').default,
      require('./assets/vendor/isotope-layout/isotope.pkgd.min.js').default,
      require('./assets/vendor/venobox/venobox.min.js').default,
      require('./assets/vendor/owl.carousel/owl.carousel.min.js').default,
      require('./assets/vendor/aos/aos.js').default,
      require('./assets/js/main.js').default
    ];

    // 动态创建并添加脚本
    const scriptElements = scriptUrls.map(src => {
      const script = document.createElement('script');
      script.src = src;
      script.async = false; // 若需按顺序加载，设为false
      document.body.appendChild(script);
      return script;
    });

    // 组件卸载时清理脚本
    return () => {
      scriptElements.forEach(script => script.remove());
    };
  }, []);

  return (
    // 你的组件内容
    <div>...</div>
  );
}

export default App;

三、修复react-helmet的使用方式 #

之前的Helmet失效是因为脚本路径错误——src目录下的文件打包后会被webpack重命名并放到静态资源目录，直接写相对路径无法找到。需通过导入获取正确的打包后URL：

import { Helmet } from 'react-helmet';
// 导入所有脚本的URL
import jqueryUrl from './assets/vendor/jquery/jquery.min.js';
import easingUrl from './assets/vendor/jquery.easing/jquery.easing.min.js';
import validateUrl from './assets/vendor/php-email-form/validate.js';
import waypointsUrl from './assets/vendor/waypoints/jquery.waypoints.min.js';
import isotopeUrl from './assets/vendor/isotope-layout/isotope.pkgd.min.js';
import venoboxUrl from './assets/vendor/venobox/venobox.min.js';
import owlCarouselUrl from './assets/vendor/owl.carousel/owl.carousel.min.js';
import aosUrl from './assets/vendor/aos/aos.js';
import mainUrl from './assets/js/main.js';

function App() {
  return (
    <>
      <Helmet>
        <script
          src={jqueryUrl}
          integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
          crossorigin="anonymous"
          async
        />
        <script src={easingUrl} />
        <script src={validateUrl} />
        <script src={waypointsUrl} />
        <script src={isotopeUrl} />
        <script src={venoboxUrl} />
        <script src={owlCarouselUrl} />
        <script src={aosUrl} />
        <script src={mainUrl} />
      </Helmet>
      {/* 你的组件内容 */}
    </>
  );
}

export default App;

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