使用Browserify运行脚本，无需先进行构建过程

Run script using Browserify without build process first

本文关键字：构建 过程 Browserify 运行 脚本 使用      更新时间：2024-06-01

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

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

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

现在是2015年了，有一个库，它叫drq。它使用内部同步xhr请求，所以它只适合用于开发目的。你只需要包括它：

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

然后，您可以在页面的任何脚本中进行所需调用：

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

它会在你的web根目录下查找节点模块，所以一定要将它们npm install放在不高于它的目录下。此外，请查看GitHub页面，在那里你可以找到一些提高性能的技巧。

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

我最初说你不能这样做，原因如下，但我想补充一点，有志者事竟成。我相信，如果有足够的时间和精力，你（或某人）可以（也可能会）想出一种方法来完成这项任务——但截至目前（12/12/13），我不知道是否有现成的工具可以帮助它。

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

  2. 当您浏览代码时，browserfy脚本会分析您的语法，并找到必须通过require方法提供的模块。这个require方法是在导出的bundle.js中定义的，以及模块所需的所有依赖项的所有代码。这允许browserfy定义的require方法同步工作，返回对您立即请求的模块的引用，而无需等待任何类型的web响应（如加载js脚本）。

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

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

  • 在开发过程中不要丑化代码。您可以使用browserify对其进行捆绑（确保对源映射使用-d），而无需对其进行丑化/缩小，这应该会稍微提高捆绑性能（无论如何，对于较大的项目）
  • 把你的模块分开一点。相互之间没有直接依赖关系的模块不必同时构建。您可以使用多个脚本标记在应用程序中包含不同的模块，也可以将浏览捆绑文件连接在一起。您完全可以设置一些繁重的任务来观察代码的变化，并且只编译包含代码变化的模块。这将减少大量浪费的cpu周期，因为browserfy不必解析和转换多个模块，只需解析和转换更改的模块。从那里，您可以重新连接到一个大捆绑包中，或者只在页面上使用多个捆绑包包含
相关文章：