Question

我在Browserify上阅读了很多关于http://javascriptplayground.com/blog/2013/11/backbone-browserify/的文章，并且总会有以下步骤：

$ browserify app/app.js | uglifyjs > app/bundle.js

这似乎是之前在浏览器中运行脚本以查看其工作原理。有没有办法不每次更改代码时都必须执行构建？类似define()中的requirejs函数...

Answer 1

现在是2015年，这里有一个图书馆，名为drq。它使用内部同步xhr请求，因此它仅适用于开发目的。你只需要加入它：

<script src="drq.js"></script>

然后，您可以在页面的任何脚本中执行require调用：

<script>

var myModule = require('my-module'),
    myClass = require('./classes/my-class.js');

// etc.

</script>

它将查找到您的Web根目录的节点模块，因此请确保npm install它们位于不高于它的目录中。另外，请查看GitHub page，在那里您可以找到一些提高性能的提示。

请再次注意，捆绑包是生产的最佳解决方案。

Answer 2

我原本说你出于以下原因不能这样做，但我想补充一点，哪里有遗嘱有办法。我确信有足够的时间和精力，你（或某人）可以（也可能会）想出办法来完成这项任务 - 但截至目前（12/12/13），我不知道是否有任何开箱即用的工具可以促进它。

browserify“modules”使用与node.js模块相同的概念编写。编写代码，并通过module.exports对象导出任何公共方法/属性/ etc。浏览器中的Javascript本身不支持这种东西。有一些样板模板（一些信息here）可以帮助在浏览器中实现这一点，并且它们可以与browserify兼容，但是......
当您浏览代码时，browserify脚本会分析您的语法并找到必须通过require方法提供的模块。这个require方法在您导出的bundle.js中定义，以及模块所需的所有依赖项的所有代码。这允许browserify定义的require方法同步工作，返回对您请求的模块的引用，而无需等待任何类型的Web响应（例如，加载js脚本）。

Require.js的工作方式与browserify完全不同。 Require.js使用您引用的define语法定义您的包，并公开一个require方法，您可以使用该方法告诉Require.js您的代码所依赖的模块。然后，Require.js会查找您需要的依赖项，如果还没有为另一个模块加载它们，则生成一个新的脚本标记并强制您的浏览器加载该模块，等待执行代码直到完成。这是一个异步过程，这意味着，javascript引擎在等待新脚本下载，解析和执行时继续处理指令。 Require.js在一些回调中包含所有这些，因此它可以等到所有依赖项都满足，然后才允许执行定义的代码（这就是将函数传递给require和define的原因，所以require.js可以在准备就绪时执行它们。

每次进行开发更改时不想捆绑的最大原因只是迭代速度。您可以做的一些事情（使用browserify）来提高性能（即捆绑速度）：

在开发过程中不要弄乱你的代码。你可以使用browserify捆绑它（确保你使用-d，而不是uglifying / minifying它，这可以加快捆绑性能（对于大型项目，无论如何）。
稍微分开你的模块。不必彼此直接相关的模块不必同时构建。您可以使用多个脚本标记在应用程序中包含不同的模块，也可以将浏览器捆绑文件连接在一起。您绝对可以设置一些grunt任务来监视代码以进行更改，并且只编译包含代码更改的模块。这将减少大量浪费的cpu周期，因为browserify不必解析和转换多个模块，只需更改那些模块。从那里你可以重新连接成一个大包，或者只是坚持在页面上包含多个包。

首先使用Browserify运行脚本而不使用构建过程

2 个答案: