组合多个JS文件

Question

我正在写一个小型色彩管理库。为了提高流程的生产率和代码的管理，我将代码划分为更小的组件（文件）。目前，它看起来像这样：

文件以正确的顺序添加到index.html文件中，我可以很好地进行测试。

现在，我一直想知道如何将它们放入单个JS文件中。直接的方法是创建一个新文件并手动添加组件（复制/粘贴）。但这会带来问题。在进行将来的修改时，我必须修改两个文件（组件中的一个和最终的合并文件），或者只是再次创建最终文件。我宁愿不这样做。

当我决定将代码分成更小的部分时，这就成了一个问题。通常情况下，处理2-3个部分可以用于复制/粘贴最终文件。但现在，有24个文件，我担心它会随着时间的推移而增加。所以我需要一种方法来自动化这个合并过程。

我可以想到两种方法来解决这个问题。我将使用一个允许我访问文件系统（PHP，PowerShell等）的工具并将组件合并到一个文件中，或者使用JavaScript，我可以访问对象本身（color）并输出它（本身，方法，属性）。

我不知道为什么，但我采取了第二种方法。我编写了一个脚本，遍历color对象，列出其属性和方法，并使用Object.prototype.toString()和JSON.stringify()输出它们。然后，我使用Blob下载它。这似乎运作良好。但是，我不知道这是否会在未来出现我无法克服的问题。

有没有更好的方法来解决这个问题？

我也想知道大型框架/库如何处理这个问题。如果我使用单个文件来编写所有代码，我必须使用2k~行。无论代码组织得多好，这看起来都很可怕。与我的相比，jQuery（10k~行）是巨大的。我怀疑他们会在单个文件上工作。如果是这样，他们如何处理合并组件？