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

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

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

Answer 2

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

1. browserify"modules"使用与node.js模块相同的概念编写.编写代码,并通过module.exports对象导出任何公共方法/属性/ etc.浏览器中的Javascript本身不支持这种东西.有一些样板模板(这里有一些信息)可以帮助在浏览器中实现这一点,并且它们可以与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)来提高性能(即捆绑速度):

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