13

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

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

这似乎是在您在浏览器中运行脚本以查看其工作原理之前完成的。每次我更改代码时，有没有办法不必进行构建？类似于...的define()功能requirejs

4

2 回答 2

11

现在是 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 页面，您可以在其中找到一些提高性能的技巧。

同样，请记住捆绑包是生产的最佳解决方案。

于 2015-08-09T10:20:30.717 回答
8

我最初说你不能这样做，原因如下，但我想补充一点，有志者事竟成。我敢肯定，只要有足够的时间和精力，您（或某人）可以（并且可能会）想出一种方法来完成这项任务 - 但截至目前（2013 年 12 月 12 日），我不知道是否有任何开箱即用的工具可以促进它。

  1. browserify “模块”使用与 node.js 模块相同的概念编写。您编写代码，并通过module.exports对象导出任何公共方法/属性/等。浏览器中的 Javascript 本身并不支持这种事情。有一些样板模板（一些信息here）可以帮助在浏览器中实现这一点，它们可以与browserify兼容，但是......

  2. 当您浏览您的代码时，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）来提高性能（即捆绑速度）的一些事情是：

  • 不要在开发过程中丑化你的代码。-d您可以使用browserify捆绑它（确保您使用, 用于源地图）而不用丑化/缩小它，这应该会加快捆绑性能（无论如何对于较大的项目）。
  • 稍微拆分一下你的模块。彼此没有直接依赖关系的模块不必同时构建。您可以使用多个脚本标签在应用程序中包含不同的模块，或者您可以将 browserify 捆绑文件连接在一起。你完全可以设置一些繁重的任务来观察你的代码的变化，并且只编译包含代码变化的模块。这将减少大量浪费的 cpu 周期，因为 browserify 不必解析和转换多个模块，只需要那些改变的模块。从那里您可以重新连接成一个大捆绑包，或者只使用页面上包含的多个捆绑包。
于 2013-12-12T18:58:29.460 回答