您的位置:首頁>正文

Browserify用於創建一個用戶端指令碼

有了Browserify, 你也可以使用require和module.exports, 這比使用標籤來處理好多了。 前邊的例子進行擴展可以做到這一點。 在下例中, Browserify用於創建一個用戶端指令碼, 它使用require載入MessageBus和jQuery, 並且在消息觸發時修改DOM。

通過創建一個package.json把jquery作為依賴, 你可以使用Browserify來載入jQuery。 這裡我們用它來創建一個DOMContentLoaded監聽器, 並且當收到消息時, 添加一個段落到容器元素。

如果Browserify生成的JavaScript檔拋出錯誤, 那麼它可能很難在堆疊中跟蹤代碼行號, 因為它們涉及到源碼的行號。 如果構建腳本時, 攜帶了--debug標識, 那麼Browserify將生成指向原始檔和行號的映射。

這些映射需要相容的調試器——你還需要開啟流覽器的調試工具來使用它們。 在Chrome中, 需要在Chrome的DevTools下的選項選擇啟用Source maps。 因為人們可能會忘記如何構建腳本, 可以添加一個腳本, 放到package.json文件, 如:"build":"browserify index.js-o bundle.js"。 還有另外一種方式來創建Browserify bundle:作為一個Node程式模組來使用Browserify。 要使用的話, 需要創建一個Browserify實例, 然後告訴它你想構建什麼檔

可以將其作為一個更複雜的構建過程的一部分來使用, 或者放在一個Grunt任務自動化構建過程中。 現在, 你已經瞭解了如何在流覽器使用Node模組和如何在Node中模擬流覽器, 接下來將學習如何優化伺服器端的web應用程式。

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示