问题标签 [browserify]

我在使用 browserify 时遇到了一些麻烦。

目标

我正在尝试使用 Backbone 构建基本的 TodoMVC 单页应用程序，而不是<script>在我的标签堆中index.html，我试图将它们与 browserify 捆绑在一起。

这是我到目前为止所做的。

lib/models/todo.js

lib/collections/todo.js

lib/app.js

为了构建我的捆绑包，我正在使用

最后，我index.html的很简单

问题

当我打开控制台并尝试运行此命令时

我收到一个错误

“无法读取未定义的属性‘延迟’”

堆栈跟踪

问题

我已经做了很多关于如何浏览主干应用程序的搜索，但是在符合我目标的事情方面我几乎没有找到。

如何将我的单页主干应用程序捆绑到app.js我可以在 html 中需要的单个应用程序中？

作为旁白

我也不确定我是否正确地包含了 jQuery。如果 Backbone 也不是我的 browserified 捆绑包的一部分，那么 Backbone 将无法将其连接到 jQuery 吗？

非常感谢任何提示。

最好的方法是为 jQuery 或带有Browserify的 Knockout 等通用库添加扩展？

例如，对于类似的项目knockout-switch-case，全局ko（淘汰）变量不会传递给模块定义调用。

淘汰开关盒的 AMD 代码是：

它期望ko(knockout) 是一个全局 on root，通常是这样，window但是当使用 Browserify 时它是Object {}.

我已经尝试过使用browserify-shim类似这样的示例，但它没有按预期工作（尽管它确实适用于具有更好的模块舞蹈的knockout-mapping ）：

我觉得好像我必须忽略一些必须非常明显的东西，因为我希望这将是一个相当常见的模块定义模式，用于包含任何 jQuery、Knockout 或任何其他依赖于全局的库的扩展。或者也许这是一个相当特定于淘汰开关案例正在做的事情的问题。

无论如何，衷心感谢您的想法和评论。

当我从缩小的 js 生成源映射回源文件时，该映射是否包含源文件的文本，还是需要单独托管它们？

HTML5 Rocks 描述提到了sources列出源文件名称的键，并解释了如何将mappings缩小的行号和列号映射到原始行号和列号，但建议“您还需要上传原始文件，以便开发工具可以参考并在必要时显示它们”。

Browserify 的debug选项生成内联源映射，在开发工具中显示原始文件，而无需单独托管源文件。

当前的源地图规范是否支持两者？

我真的很喜欢使用cdnjs在客户端加载 javascript，它使我的项目更小更干净，并且加载所有内容也更快。我目前使用require.js进行模块加载，它可以从 cdnjs 和 shim 传统脚本加载以轻松使用它。我最近一直在研究browserify作为替代方案，虽然我确实找到了browserify-shim，它可以像 require 一样填充非 cjs 模块，但我很好奇是否有办法从远程加载脚本使用 browserify 获取源代码，或者无论如何您都必须在本地安装所有内容。

如果答案是你必须通过 npm 在本地安装所有东西，这会让事情变得有点奇怪。一方面，您可以添加node_modules到.gitignore文件中，而不必担心在使用package.json.意味着将运行一个额外的部署后步骤，npm install并且该节点需要安装在您要部署到的任何位置，这对我来说似乎也有点尴尬，尤其是对于静态站点。

真的，任何关于此的想法或讨论都会很棒:)

所以我一直在玩 JS 并browserify允许将我的 JS 拆分成更小的文件块。它很好用，但是，我仍然不知道如何正确使用该require功能。

对我来说，它充当服务定位器，因为它查找要加载的正确“文件”并返回一个对象。（例如，在 PHP 中，require将文件加载到内存中但不会construct）。

例子：

然后，要使用它，我会这样做：

var Foo = require('foo');

和

var foo = new Foo();

请注意，未构造导出的函数。

我本可以这样做：

var foo = require('foo')();

这些方法对我来说似乎都不对（我可能错了）。

• 1）这样做很常见吗？还是应该导出执行的函数？

无论如何，这个介绍是为了了解我应该如何使用 require 函数。

例如，如果我有一个依赖于 Bar 的 Foo 对象，我有两种方法：

服务地点：

或者我可以这样做：

依赖注入

我显然知道这是两件不同的事情，并且服务于不同的目的。

• 2）但我想知道在 JS 中常见/正确的做法是什么，是否有任何公认的规则？

我正在尝试为 Browserify 编写一个转换脚本，允许我使用require().less 文件。转换会将它们编译为 CSS，然后将缩小的 CSS 包装在一个小的 Javascript 函数中，该函数将 CSS 附加到页面上。

我的麻烦是主 LESS 模块是异步的，它似乎不能与转换脚本一起工作：

lessify/index.js（直接从node-underscorify建模）

这适用于 .css 文件，但在 .less 文件上中断，因为compiled未定义。

在与此相关的 less.js 源中有几个已完成的 拉取请求，但似乎没有一个对我有用。

我对这个through库不是很熟悉，所以也许它的行为可以很容易地调整为异步函数？less.render()我意识到默认情况下异步处理是有意义的@import，并且不介意放弃导入以便能够require()在我的页面上直接 LESS。

我有一个节点模块，我试图通过 browserify 分发。该项目有许多功能，这些功能通常与根对象相关联，例如 jQuery 的 $、下划线的 _ 或 Leaflet 的 L。我的 index.js 看起来像这样：

这在 node.js 中运行良好，因为我可以这样做：

问题是，当我使用 browserify 时，它会消除我的根对象并将所有内容展平。在浏览器中，会发生这种情况

这就是我使用 browserify 的方式（基本上是默认值）：

有谁知道一种方法让 browserify 不把所有东西都展平，而只是暴露根对象？

我最近在所有 CommonJS 与 AMD 的战斗中进行了一些挖掘，这是我的发现......（顺便说一句，我不是在这里说教，我分享我的想法以获得一些建设性的见解......） RequireJS 带来了很多复杂性我的 Angular 模块，对我来说感觉不对，因为它是一个模块包装在一个模块中...... Browserify 方式更干净，但要让它正确处理所有事情，你需要正确实现所有依赖项和依赖项依赖项，并且不幸的是，我们并不生活在一个完美的世界中......所以你必须对填充的 Libs 的内部依赖进行填充和填充......我不是额外复杂性的忠实粉丝......

我目前的方式（并受到您所有建设性的批评......）

我有一个 grunt 文件连接和缩小我的所有资源，像 BreezeJS、$、Q、Ladda 等库......在全局范围内泄漏......然后我为这些全局变量声明这个类型模块：

在我的应用程序中使用“Angularify”依赖项之后，我没有在团队中使用过这种技术，我想知道这是否会为某些人触发一些红灯，他们是否会解释为什么......谢谢你的时间。

我正在运行“grunt”的目录有 node_module 文件夹，其中包含所有模块，包括：Bootstrap、Browserify 等。

当我运行“咕噜”

我得到：

它停在browserify并说在这种情况之前找不到模块'bootstrap'，它说在重新启动“grunt”后没有我用“npm install jquery”安装的“jquery”，随后还报告了一些其他丢失的模块我安装了。但是使用引导程序，即使在安装并确保它存在于 node_modules 目录之后，我仍然有这个错误。

任何帮助将不胜感激。

我是 grunt、npm、nodejs 等的新手。我只是想设置一个软件。

附加任务代码。

有两个 Browserify 任务，我假设第一个从上面的输出成功完成？

So I have a directory of files where two of the files are immediately inside the folder:

But one is nested a level deeper

I want to compile these with grunt-browserify using an alias mapping so I can require them as:

require('view1')

require('view2')

require('other/view3')

So I setup the simple mapping in the grunt-browserify config:

The first two files require() fine, but the last one can't be found. The alias mapping I'm using is only looking a single level deep. How can I get it to go down every level I give it?