網站與節點 - 幾個關於browserify或webpack的問題

Question

我需要你的幫助，我正在處理的網站項目。我的項目包括7個html文檔，3個樣式表，8個.js（包括jquery.min.js和一些jquery插件）以及一些圖片。我想盡可能多地捆綁和縮小它（最好只獲得1個CSS和1個js文件，或者1個js，其中包含樣式）。

爲了清楚起見 - 現在，當我在html中擁有所有依賴關係時 - 所有事情都正常工作。但我不知道如何設置所有module.exports和要求。你能告訴我如何以適當的方式一步一步地做到這一點？

非常感謝提前。

PS。我使用ES5編寫，所以我不使用Babel。

Answer 1

您可以執行以下操作使您的代碼庫更加整潔。

• 手動組的相關js文件的內容爲一體，並通過您的合併JS腳本的頂部使用module.exports = module_name（如在您的項目所需要的任何jscripts重複），將其導出爲一個模塊的NodeJS。
• 然後將導出的模塊包含在主節點文件中，並使用var modulesfile = require(./module_name);包含其主要功能請注意導入js模塊時的目錄路徑。
• 您還可以像minifyjs一樣運行縮小器，以使您的js文件的大小更小，如果它們需要從url多次調用。 Nodejs安裝和使用minifyjs可以在here找到。
• 您也可以通過使用

@import url("./css/filename.css");就先驗證正確的CSS目錄路徑調用從現有的內的其他CSS。

---

如果你也想用browserify節點出現在故宮網站full guide。

另一個不錯的和簡單的解決方案是將所有的代碼庫移動到Visual Studio Web項目中。從那裏你可以做你想做的事情，在捆綁的配置文件中組織你的腳本和css文件（/腳本和/內容目錄）等。

注意：你所有的代碼必須被遷移到一個asp.net項目正確使用this approach（按照Microsoft文檔）。