问题标签 [browserify-shim]

我很难将我的头包裹在 Browserify-shim 上以实现我想要的。该文档似乎很简单，但我一定遗漏了一些东西。

我试图能够使用 jquery var $ = require('jquery')（它本身可以正常工作），但也能够使用引用全局window.$或window.jQuery变量的随机插件。

例如，这是我尝试使用的插件： https ://github.com/jackmoore/zoom

它使用其他方法扩展$对象，并包装在 IIFE 中，注入 window.jQuery，如下所示：

我正在使用 gulp 以简单的方式捆绑我的脚本，使用 npm browserify（而不是已弃用的 ( gulp-browserify) ：

package.json这是我文件的 browserify 部分：

我需要两个jquery和jquery-zoom一个 .js 文件：

browserify shim 诊断工具的输出对我来说看起来很不错：

但是当我的脚本在浏览器中执行时，window.jQuery 仍然明显未定义。知道有什么问题吗？

我制作了一个快速、简单的存储库，重现了我的问题： https ://github.com/clementoriol/browserify-shim-test

谢谢 ！

所以我目前在一个更大的项目上使用 Browserify，但从 Jquery Validation 中不断得到'jQuery is not defined'，即使它被填充了。我也使用其他 jquery 插件（但只有这个是令人头疼的），因为它是 NPM 实际安装的唯一一个。根据他们的文档，它应该能够处理它，即使是 jquery 也可以，只是插件不行。

http://requirebin.com/?gist=d60e92be0904fe44cf17

这是一个按比例缩小的问题示例。

（我可以编辑 package.json 中的浏览器字段以指向该文件，它会起作用，但这似乎是一种反直觉的使用方式）

任何人都知道如何 Browserify-Shim Angular 2，同时将 Angular 保持在外部而不将其捆绑在构建中？

...

结果：

我正在使用 browserify 测试 gulp，并且正在尝试使以下工作：

我有一个名为 export.js 的文件，它依赖于另一个名为 export2.js 的文件。

出口.js

export2.js

我有另一个名为 app.js 的文件，我在其中定义了以下代码：

我试图通过使用垫片来定义依赖关系。
我的 package.json 中的相关代码如下所示：

路径应该是正确的。

我的 gulp 文件定义：

我之前测试过这个任务（没有依赖的 app.js 的丑化），它运行良好。
但是，在定义了垫片后，我仍然在控制台中收到一条消息，提到

找不到模块“e”

你能看出哪里出了问题或我误解了什么吗？

我正在尝试使用由Browserify拼接在一起的DataTables Bootstrap 样式，但是当我使用生成的 Browserify 包访问页面时，JS 控制台显示“未捕获的错误：找不到模块‘数据表’。

我的require('datatables');语句工作得很好并成功加载了 DataTables，但是当我尝试require('datatables-bootstrap');页面时没有加载。Browserify 确实成功地编译了这个包。

bower install --save datatables我虽然通过 jQuery获取 DataTables 文件npm install --save jquery。 这是 DataTables 源文件

包.json

index.js

我有一个“浏览器”库，它定义了一些 React 组件，我想从 HTML 页面（从 Rails 应用程序提供）加载这些组件，然后实例化 React 组件，由 Rails 放入页面内的一些数据提供。

（总体情况是：我们有一个 TurboLinks 应用程序，我们希望将一些 React 组件用于非常特定的部分，需要更多
的反应性。Rails 页面将加载 React 运行时和所需的应用程序组件库，然后生成最少的原始JS 根据需要实例化 React 组件）

我发现的只是将外部库变量公开给我的库的方法，但我想将我的变量公开给全局浏览器范围。

我最终以一种相当丑陋的方式（window.Stuff = Stuff;）直接从.jsx源文件中导出类，但我觉得这段代码很臭......

有什么更好的方法来实现这样的事情吗？

我有通过 browserify-shim 使用外部库的 browserify 包。问题是 index.html ，我必须手动设置包含文件的顺序：首先是外部库，然后是 browserify 包 - 它不能以不同的顺序工作。我的问题是是否有办法构建捆绑包不关心它在 html 文件中的顺序？

编辑：

这就是我的架构的外观，我必须使用 javascript 文件：

lib.js- 这是别人写的外部库

myBudnle.js- 我通过 gulp 使用 browserify 构建的代码：

和 browserify-shim 配置： "browserify-shim": { "lib": "global:LIB" },

然后我有 index.html 文件，我包含两个 js 文件，但我必须按特定顺序执行此操作

当我更改顺序时（我自动生成 html 文件，所以这经常发生） LIB 在中未定义myBundle.js，我必须手动重新排序文件。因为我只有 2 个文件，所以这不是问题，但我还是想避免它，我自己也不关心这个订单。

我在将全局暴露jquery给几个npm加载的非 commonjs 库时遇到了问题。

jquery我在 package.json中有以下公开配置：

我正在尝试将此应用到来自eonasdan的具有 common-js 依赖关系解析的日期选择器：

但是编译的文件不会替换require('jquery')为全局变量构造，因为它发生在包括其他库在内的所有其余文件中，例如这个编译的引导滑块：

这个库如此特殊的原因可能是什么？

需要链的深度对 browserify-shim 有影响吗？导致主捆绑文件中需要滑块，而 datepicker 是捆绑包的依赖项（第 3 级）

FileAPI 库 ( https://github.com/mailru/FileAPI/issues/202 ) 不正式支持 CommonJS 模块。我试过使用 browserify-shim，但我无法让它工作。在requireing之后fileapi，我只得到一个空对象。我在这里创建了一个用于复制的仓库https://github.com/Prinzhorn/browserify-fileapi

相关的 package.json 部分

如果你想在本地尝试：

查看 Chromium 中的控制台，您会看到 running 中的空数组console.log(Object.keys(require('fileapi')))。请注意，有一个window.FileAPI具有正确 API 的全局变量。

有谁知道 browserify-shim 是否能够填充 FileAPI？因为我相信它会做一些奇特的事情来管理它的依赖项（连接的文件需要某些全局变量）。

我的目标是在我的 HTML 文件中包含以下内容并让它们都正常工作：

索引.html：

所以：

1. jQuery 应该可以作为全局$变量使用。
2. Bootstrap 的 javascript 函数也应该可以工作，因为它们是 vendor.js 的一部分
3. 我app.js也应该工作，而不是重新声明$已经在全局范围下通过vendor.js.

请参阅下面的文件。我当前的解决方案错误$(".myclass").doSomethingWithJquery();当我的互联网关闭时，我收到错误：

未捕获的 ReferenceError：$ 未定义

...这让我认为（也许）snackbarjs 或其他模块正在将 jQuery 泄漏到全局范围。

然后，当我将行更改vendor.js为：var $ = jQuery = require('jquery');我收到错误：

未捕获的 ReferenceError：$ 未定义

但现在它被在线调用$(document).ready(function.....

第三，如果我完全注释掉vendor.js，我会得到两个错误：

未捕获的 ReferenceError：$ 未定义

未捕获的 ReferenceError：未定义 jQuery

我怎样才能让这个前端设置在全局范围内必要时正确填充变量，而不是在不需要时？

gulpfile.js：

供应商.js：

包.json（browserify-shim配置）：