Browserify - 如何包含非公開購買的第三方腳本

Question

我是新來的browserify，它的用法對我來說並不完全清楚，雖然好處似乎很有吸引力。

我有幾個問題，希望有人能澄清。

1. 我見過關於在package.json中使用browserify-shim的博客文章，其中包含第三方庫，如jquery和bootstrap。我也看到過使用gulp等工具的帖子會生成捆綁文件。我似乎無法找到一個很好的答案，爲什麼如果吞嚥工具能夠自動化這個過程，爲什麼需要browserify-shim。有人可以擺脫一些光？爲什麼甚至需要browserify-shim？我覺得一攬子解決方案雖然多一點涉及，但是有點清潔。它不會污染package.json與特定的東西，這是一個構建的東西，因此一起gulp（只是我個人的意見）

2. 如何處理不在npm的第三方庫，也不上市？例如，我們從第三方購買腳本。該腳本不是任何常見的js，而是一個具有一些依賴性的常規js文件（例如，jQuery和下劃線）。

Answer 1

Browserify讓你利用節點的世界，並捆綁起來交付給瀏覽器。它理解Node模塊，它通過CommonJS require語句定義依賴關係。

但是如果你有沒有定義爲節點模塊和不支持CommonJS的一些JS代碼或庫？輸入browserify-shim。它提供了圍繞任何腳本的填充程序包裝器，如您的私有第三方腳本，以便它可以被定義爲並用作Browserify可以理解的Node模塊。

使用browserify-shim完全正交於如何您執行Browserify。基本上有兩種選擇：A）使用Browserify's command line API或B）使用Browserify's JS API。

使用的構建工具，像Gulp，意味着第二個選項，因爲你會使用Browserify的JS API在咕嘟咕嘟構建腳本（即gulpfile.js）。很多人更喜歡使用Gulp，因爲它擁有一個良好的插件生態系統，可以讓你做更多的事情，而不僅僅是調用Browserify（例如，編譯CoffeeScript，編譯SASS，運行JSHint等）。

因此，要回答你的具體問題：

1. Browserify，墊片，如果你有JS代碼不寫成一個節點/ CommonJS的模塊，你需要通過Browserify捆綁時，才需要。爲此，您需要告訴browserify-shim在package.json中將哪些文件填充爲模塊（以及它們具有哪些依賴關係）。請注意，這與Gulp完全無關;所以無論您是否使用Gulp，您都需要它。

2. 你描述的是browserify-shim的完美用例。將第三方腳本放入您的項目中，將這些文件配置爲包中的模塊。json per b-shim的文檔，require他們在您的代碼中，並執行Browserify將它們與您的代碼捆綁在一起。你也可以把它們分開捆綁，放在自己的項目中，等等 - 但是你想要構造它。

幾件事情要注意：

• 您可以勻幾乎所有的JS庫這種方式。
• 將JS庫改爲Node模塊將全局範圍改爲私有範圍。希望庫中的所有內容都是命名空間，以便其所有功能都可以作爲單個模塊導出，但如果不是這樣，則可能需要修改shimmed代碼以明確附加window（這很容易但不推薦）或拆分代碼分成不同的文件/模塊。
• Browserify和Gulp都使用JS API中的流，但Browserify使用本地節點流，而Gulp使用Vinyl流。由於它們不能很好地協同工作，因此您可能必須使用vinyl-source-stream來將Gulp調整爲Browserify（例如，用於重命名Browserify管道中的文件），或者使用vinyl-transform來將Browserify調整爲Gulp（例如，包裝一個Browserify流以用於一個Gulp管道）。