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管道）。