10

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

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

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

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

4

1 回答 1

17

Browserify让您可以使用 Node 的世界并将其捆绑起来以交付给浏览器。它理解 Node 模块，这些模块通过 CommonJSrequire语句定义依赖关系。

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

browserify-shim 的使用与执行 Browserify的方式完全正交。那里基本上有两个选项：A）使用Browserify 的命令行 API或B）使用Browserify 的 JS API。

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

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

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

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

有几点需要注意：

  • 您可以通过这种方式填充几乎任何 JS 库。
  • 将 JS 库填充为 Node 模块会将全局范围更改为私有范围。希望库中的所有内容都具有命名空间，以便其所有功能都可以作为单个模块导出，但如果不是，您可能必须修改填充代码以显式附加内容window（这很容易但不推荐）或拆分编码成单独的文件/模块。
  • Browserify 和 Gulp 在其 JS API 中都使用流，但 Browserify 使用原生 Node 流，而 Gulp 使用 Vinyl 流。由于它们不能很好地配合使用，您可能必须使用vinyl-source-stream使Gulp 适应Browserify（例如，用于重命名Browserify 管道中的文件），或使用vinyl-transform使Browserify 适应Gulp（例如wrap用于 Gulp 管道的 Browserify 流）。
于 2014-09-28T19:51:30.940 回答