如何使網頁在目錄樹中包含所有js文件？

Question

我試圖弄清楚如何建立一個JavaScript開發項目，該項目使我可以將代碼分解成幾個文件。 我計划最終在客戶端Web瀏覽器上運行它，但是首先我需要設置一個高效的開發環境。

在此之前，我曾使用過其他編程語言，以便您將大量文件保留在一個子目錄中，然后將所有內容編譯到最終的可部署文件中（或讓解釋器執行類似的操作）。 Javascript似乎不允許這樣做-我必須為每個js文件手動添加一個<script>標記到我的網頁的頭部，以使瀏覽器加載它。 一旦您需要跟蹤約10個以上的文件，這將變得很難管理。 如果我可以編寫<script src="myscripts/**/*.js">以吸收所有東西，至少在開發期間是最好的。

我發現Grunt'uglify'看起來像是用於創建要部署的最終文件的便捷工具，但是在開發過程中，我需要將所有內容分開放置以便可以正確調試。 有什么辦法可以讓我的網頁加載開發目錄中的每個js文件？

Answer 1

正如其他人在評論中提到的那樣，Webpack（或類似工具）是必經之路。 它捆綁了所有相關代碼，也可以對其進行處理以使其縮小。

我想解決這個問題：

但是在開發過程中，我需要將所有內容分開放置，以便可以正確調試

您不需要或想要那個。 在開發過程中，您希望針對以后將在部署中使用的相同類型的構建過程進行測試。 因此，如何輕松調試已編譯的腳本？ 有一個生成的.map文件，它告訴瀏覽器您的原始代碼是什么樣。

當您打開開發者工具時，Chrome和其他瀏覽器會自動加載並解析此文件。 然后，您將能夠看到原始源代碼（對於任何已轉譯的內容，都將以原始語言查看）並對其進行調試，就好像它最初並未捆綁在一起一樣。

除非您希望外部用戶能夠查看所有原始源代碼，否則請不要部署此映射文件。