如何让网页加载目录树中的所有JS文件？

嘿，我完全懂你手动维护一堆<script>标签的痛苦——当文件数量超过10个时，简直是调试和维护的噩梦！针对你开发阶段需要自动加载所有子目录JS文件、同时保留文件独立性方便调试的需求，这里有几个实用的方案：

1. 服务器端动态生成<script>标签 #

如果你的项目用了后端服务（比如Node.js/Express、PHP等），可以通过服务端脚本自动扫描指定目录下的所有JS文件，然后在HTML模板中动态输出对应的<script>标签。

举个Node.js+EJS模板的例子：

<% 
const fs = require('fs');
const path = require('path');

// 递归读取目录下所有JS文件
function scanScripts(dir) {
  let results = [];
  const files = fs.readdirSync(dir);
  
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    
    if (stat.isDirectory()) {
      results = results.concat(scanScripts(fullPath));
    } else if (path.extname(file) === '.js') {
      // 转换为相对HTML的路径
      results.push(fullPath.replace(/\\/g, '/'));
    }
  });
  return results;
}
%>

<!-- 动态生成所有script标签 -->
<% scanScripts('myscripts').forEach(scriptPath => { %>
  <script src="<%= scriptPath %>"></script>
<% }) %>

启动服务后，每次刷新页面都会自动扫描最新的文件，完全不用手动修改HTML。

2. 用模块打包工具的开发模式 #

虽然你提到Grunt uglify用于生产，但Webpack、Rollup或Parcel这类工具的开发模式完全能满足你的需求：它们会帮你处理模块依赖，同时保持原始文件的独立性（方便调试），还支持热更新。

以Webpack为例：

1. 在项目根目录创建main.js，用require.context自动导入所有JS文件：

// main.js
// 递归扫描myscripts下所有.js文件并导入
const scriptContext = require.context('./myscripts', true, /\.js$/);
scriptContext.keys().forEach(scriptContext);

2. 配置Webpack的开发环境，开启devtool: 'eval-source-map'（让浏览器开发者工具显示原始文件结构），然后启动Webpack Dev Server。
3. HTML里只需要引入Webpack生成的开发版文件：

<script src="/dist/main.js"></script>

修改任何JS文件后，浏览器会自动刷新，调试时能直接定位到原始文件，体验和手动加载单个文件一致。

如果追求零配置，Parcel更适合你：只需要在HTML里引入主文件，启动parcel index.html后，它会自动扫描所有依赖、开启开发服务器并支持热更新。

3. 轻量方案：自动生成加载器脚本 #

如果你不想用打包工具或后端服务，可以写一个简单的Node脚本，自动生成一个loader.js，让它在浏览器中动态加载所有JS文件。

创建generate-loader.js脚本：

const fs = require('fs');
const path = require('path');

function scanScripts(dir) {
  let files = [];
  const items = fs.readdirSync(dir);
  
  for (const item of items) {
    const fullPath = path.join(dir, item);
    const stat = fs.statSync(fullPath);
    
    if (stat.isDirectory()) {
      files = files.concat(scanScripts(fullPath));
    } else if (path.extname(item) === '.js') {
      files.push(fullPath.replace(/\\/g, '/'));
    }
  }
  return files;
}

// 生成loader.js的内容
const loaderContent = `
const scriptPaths = ${JSON.stringify(scanScripts('myscripts'))};
scriptPaths.forEach(src => {
  const script = document.createElement('script');
  script.src = src;
  script.defer = true; // 可选：延迟加载不阻塞HTML解析
  document.head.appendChild(script);
});
`;

fs.writeFileSync('loader.js', loaderContent);

每次新增或删除JS文件后，运行node generate-loader.js生成最新的loader.js，然后在HTML里只需要引入这一个文件：

<script src="loader.js"></script>

如果想更省心，可以用nodemon监听myscripts目录的变化，自动重新生成loader.js。

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