React项目中引入JavaScript文件失效问题求助

Hey Raj, let's break down why your initial approach isn't working and walk through the most reliable ways to use your JavaScript files in a React app.

Why Your Original Method Failed #

React apps (especially those created with Create React App) use webpack to bundle code, and this changes how file paths and module handling work:

• Files in the src/ directory are treated as modules, not static assets. When you reference ../src/app.js in index.html, webpack doesn't resolve this path correctly after bundling—your final build won't have a src folder accessible to the browser.
• Even if the path were correct, if your JS files use ES modules (like export/import), they won't run in a plain <script> tag which doesn't support module syntax by default.

Solution 1: Use the Public Folder (For Global Scripts) #

If your JS files need to be available globally (e.g., attached to the window object), move them to the public/ folder (instead of src/). This folder's contents are copied directly to your build root, so you can reference them reliably with %PUBLIC_URL%:

Step 1: Move Files #

Move app.js, helper.js, and sort-algorithms.js from src/ to public/.

Step 2: Update index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... existing meta tags and links ... -->
  <script src="%PUBLIC_URL%/app.js"></script>
  <script src="%PUBLIC_URL%/helper.js"></script>
  <script src="%PUBLIC_URL%/sort-algorithms.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Step 3: Expose Code to Window (If Needed) #

If you want to access functions from these scripts in React components, attach them to the global window object in your JS files:

// In helper.js
window.helperFunctions = {
  calculateSum: (a, b) => a + b,
  formatDate: (date) => new Date(date).toLocaleDateString()
};

Then use them in your component:

// In a React component
function MyComponent() {
  const sum = window.helperFunctions.calculateSum(5, 3);
  return <div>Sum: {sum}</div>;
}

Solution 2: Import as Modules (Recommended for React) #

This is the standard, modular approach for React apps. If your JS files export functions/values, import them directly into your React components:

Example in App.js #

import './app.js'; // Runs the script (if it has side effects)
import { calculateSum } from './helper.js';
import { bubbleSort } from './sort-algorithms.js';

function App() {
  const sortedArray = bubbleSort([7, 2, 9, 1]);
  return (
    <div>
      <p>Sorted Array: {sortedArray.join(', ')}</p>
      <p>Sum: {calculateSum(10, 20)}</p>
    </div>
  );
}

export default App;

Webpack will handle bundling these files into your app's main bundle, so no path issues or global scope pollution.

Solution 3: Dynamic Script Loading (Control Load Timing) #

If you need to load scripts after your React component mounts (e.g., for dependent scripts), use useEffect to create script tags dynamically:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Helper function to load a script
    const loadScript = (src) => {
      const script = document.createElement('script');
      script.src = `${process.env.PUBLIC_URL}/${src}`;
      script.async = false; // Set to false if scripts depend on each other
      document.body.appendChild(script);

      // Cleanup: Remove script when component unmounts
      return () => document.body.removeChild(script);
    };

    // Load your scripts
    const cleanupApp = loadScript('app.js');
    const cleanupHelper = loadScript('helper.js');
    const cleanupSort = loadScript('sort-algorithms.js');

    return () => {
      cleanupApp();
      cleanupHelper();
      cleanupSort();
    };
  }, []);

  return <div>Your React content here</div>;
}

Again, make sure your scripts are in the public/ folder for this to work.

Final Recommendation #

• Use Solution 2 if your JS files are modules (exporting code) — it's the most maintainable and aligns with React's modular design.
• Use Solution 1 or 3 only if you need global access to the scripts (e.g., legacy code that can't be converted to modules).

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