如何使网页在目录树中包含所有js文件？

Question

我试图弄清楚如何建立一个JavaScript开发项目，该项目使我可以将代码分解成几个文件。 我计划最终在客户端Web浏览器上运行它，但是首先我需要设置一个高效的开发环境。

在此之前，我曾使用过其他编程语言，以便您将大量文件保留在一个子目录中，然后将所有内容编译到最终的可部署文件中（或让解释器执行类似的操作）。 Javascript似乎不允许这样做-我必须为每个js文件手动添加一个<script>标记到我的网页的头部，以使浏览器加载它。 一旦您需要跟踪约10个以上的文件，这将变得很难管理。 如果我可以编写<script src="myscripts/**/*.js">以吸收所有东西，至少在开发期间是最好的。

我发现Grunt'uglify'看起来像是用于创建要部署的最终文件的便捷工具，但是在开发过程中，我需要将所有内容分开放置以便可以正确调试。 有什么办法可以让我的网页加载开发目录中的每个js文件？

Answer 1

正如其他人在评论中提到的那样，Webpack（或类似工具）是必经之路。 它捆绑了所有相关代码，也可以对其进行处理以使其缩小。

我想解决这个问题：

但是在开发过程中，我需要将所有内容分开放置，以便可以正确调试

您不需要或想要那个。 在开发过程中，您希望针对以后将在部署中使用的相同类型的构建过程进行测试。 因此，如何轻松调试已编译的脚本？ 有一个生成的.map文件，它告诉浏览器您的原始代码是什么样。

当您打开开发者工具时，Chrome和其他浏览器会自动加载并解析此文件。 然后，您将能够看到原始源代码（对于任何已转译的内容，都将以原始语言查看）并对其进行调试，就好像它最初并未捆绑在一起一样。

除非您希望外部用户能够查看所有原始源代码，否则请不要部署此映射文件。