Browserify - 如何包含非公开购买的第三方脚本

Question

我是 browserify 的新手，它的用法对我来说并不完全清楚，尽管它的好处似乎很引人注目。

我有几个问题，希望有人能澄清一下。

我看过关于在 package.json 中使用 browserify-shim 来包含第三方库(如 jquery 和 bootstrap)的博客文章。我还看到使用 gulp 之类的工具生成捆绑文件的帖子。如果像 gulp 这样的工具能够自动化这个过程，我似乎无法找到一个很好的答案来解释为什么需要 browserify-shim。有人可以阐明一下吗？为什么甚至需要 browserify-shim？我觉得 gulp 解决方案更干净一些，尽管涉及更多一点。它不会污染 package.json 与 browserify 特定的东西，这是一个构建的东西，因此与 gulp 一起使用(只是我个人的观点)

如何处理不在 npm 中也不公开的第三方库？例如，我们从第三方购买脚本。该脚本不是任何常见的 js，而是具有一些依赖项的常规 js 文件(例如，在 jquery 和下划线上)。

Answer 1

Browserify 让您可以将 Node 的世界捆绑起来交付给浏览器。它理解 Node 模块，这些模块通过 CommonJS require 定义依赖关系陈述。

但是如果你有一些 JS 代码或库没有定义为 Node 模块并且不支持 CommonJS 怎么办？输入 browserify-shim .它为任何脚本(例如您的私有(private)第三方脚本)提供了一个 shim 包装器，因此可以将其定义为 Browserify 理解的 Node 模块并用作其使用。

browserify-shim 的使用与 完全正交。如何你执行 Browserify。那里基本上有两个选项:一)使用Browserify's command line API或 B) 使用Browserify's JS API .

使用构建工具，例如 Gulp , 意味着第二个选项，因为您将在 Gulp 构建脚本(即 gulpfile.js)中使用 Browserify 的 JS API。很多人更喜欢使用 Gulp，因为它有一个很好的插件生态系统，可以让你做的不仅仅是调用 Browserify(例如编译 CoffeeScript、编译 SASS、运行 JSHint 等)。

因此，要回答您的具体问题:

仅当您的 JS 代码未编写为需要通过 Browserify 捆绑的 Node/CommonJS 模块时，才需要 Browserify-shim。为此，您需要在 package.json 中告诉 browserify-shim 哪些文件作为模块填充(以及它们具有哪些依赖项)。请注意，这与 Gulp 完全无关；所以无论你是否使用 Gulp，你都需要它。

您描述的是 browserify-shim 的完美用例。将您的第三方脚本放入您的项目中，根据 b-shim 的文档将文件配置为 package.json 中的模块，require它们在你的代码中，并执行 Browserify 将它们与你的代码捆绑在一起。您也可以将它们单独捆绑，将它们放在自己的项目中，等等 - 但是您想要构建它。

有几点需要注意:

您可以通过这种方式填充几乎任何 JS 库。

将 JS 库填充为 Node 模块会将全局范围更改为私有(private)范围。希望库中的所有内容都有命名空间，以便其所有功能都可以作为单个模块导出，但如果不是，您可能必须修改填充代码以显式附加到 window (这很容易但不推荐)或将代码拆分为单独的文件/模块。

Browserify 和 Gulp 在其 JS API 中都使用流，但 Browserify 使用原生 Node 流，而 Gulp 使用 Vinyl 流。由于它们不能很好地配合使用，您可能不得不使用 vinyl-source-stream使 Gulp 适应 Browserify(例如，用于重命名 Browserify 管道中的文件)，或使用 vinyl-transform使 Browserify 适应 Gulp(例如，包装 Browserify 流以在 Gulp 管道中使用)。