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

Question

我是浏览器的新手,虽然它的好处似乎很有吸引力但我的用法并不完全清楚.

我有几个问题,希望有人能澄清一下.

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

2. 如何处理不在npm但不公开的第三方图书馆？例如,我们从第三方购买脚本.该脚本不是任何常见的js,而是具有一些依赖性的常规js文件(例如,在jquery和下划线上).

Answer 1

Browserify让您了解Node的世界并将其捆绑以便传送到浏览器.它了解Node模块,它通过CommonJSrequire语句定义依赖关系.

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

使用browserify-垫片的是完全垂直于如何在执行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使用本机节点流,而Gulp使用Vinyl流.由于它们不能很好地结合在一起,你可能不得不使用乙烯基源流来使Gulp适应Browserify(例如,用于在Browserify管道中重命名文件),或者使用乙烯基变换来使Browserify适应Gulp(例如换行)用于Gulp管道的Browserify流).