如何在HTML的script标签中遍历目录文件及动态生成的Bundle文件？

Let’s cut straight to the core truth first: Client-side JavaScript running in a browser cannot directly access or traverse files on the server or local file system. This is a non-negotiable security restriction—browsers sandbox JS to prevent unauthorized access to files, which would open massive security holes.

But don’t worry, there are practical workarounds for your use case, especially with dynamic bundle files. Let’s break this down:

1. How to "Traverse" Files (The Practical Approach) #

To work with server-side files in client-side JS, you need help from your backend. Here’s the standard flow:

• Step 1: Create a server-side endpoint (e.g., /api/bundle-list) that generates a list of your dynamic bundle files (formatted as JSON, for easy parsing).
• Step 2: Use client-side JavaScript to fetch this list, then process the files as needed.

Example Implementation #

Suppose you’re using Node.js/Express on the server. First, the server code (simplified):

// Server-side (Node.js/Express example)
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.get('/api/bundle-list', (req, res) => {
  const bundleDir = path.join(__dirname, 'public', 'bundles');
  fs.readdir(bundleDir, (err, files) => {
    if (err) {
      return res.status(500).json({ error: 'Failed to read bundle directory' });
    }
    // Filter to only include your bundle files (e.g., .js files)
    const bundleFiles = files.filter(file => file.endsWith('.js'));
    res.json(bundleFiles);
  });
});

app.listen(3000);

Then, in your HTML (even directly in the <head> tag), you can fetch this list and process the bundles:

<head>
  <script>
    async function loadAndProcessBundles() {
      try {
        // Fetch the bundle list from the server
        const response = await fetch('/api/bundle-list');
        const bundleFiles = await response.json();
        
        // Traverse and handle each bundle
        bundleFiles.forEach(bundle => {
          console.log(`Found dynamic bundle: ${bundle}`);
          // Example: Dynamically load the bundle into the page
          const scriptTag = document.createElement('script');
          scriptTag.src = `/bundles/${bundle}`;
          document.head.appendChild(scriptTag);
        });
      } catch (err) {
        console.error('Error loading bundles:', err);
      }
    }

    // Run the function as soon as the script loads
    loadAndProcessBundles();
  </script>
</head>

2. Can You Do This in the HTML Head’s <script> Tag? #

Absolutely! As shown in the example above, you can place this logic directly in the <head>. A few quick notes to keep in mind:

• The DOM is already available when scripts in the <head> run (since the head is parsed before the body), so you can safely manipulate elements like adding new script tags.
• If you need to support older browsers, you can replace async/await with .then() chains, but modern browsers handle async/await just fine.

Bonus Tip for Dynamic Bundles #

If your bundles are generated by tools like Webpack or Vite, these tools often output a manifest.json file that lists all generated bundles automatically. You can serve this manifest file and fetch it directly with JS, skipping the custom server endpoint step.

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