为Browserify定义全局变量

seb*_*nnm 34 spine.js browserify

我正在使用SpineJS(它导出一个commonjs模块)并且它需要全局可用,因为我在任何地方都使用它,但似乎我必须Spine = require('spine')对每个使用Spine的文件进行操作.

有没有什么方法可以定义Spine一次以使其全球可用?

PS:我使用Spine作为例子,但我一般都想知道如何与其他任何库一起使用.

Dav*_*net 56

Spine = require('spine')在每个文件中写入是正确的方法.

然而,使用globalor window对象有多种可能性(browserify将global对象设置window为全局命名空间):

  • 在spine.js中: global.Spine = module.exports
  • 在browserify捆绑的任何其他.js文件中: global.Spine = require('spine')
  • 在.html文件引用的脚本标记或.js文件中,在spine.js文件之后: window.Spine = require('spine')

  • 使用像jQuery和lodash/underscore这样的常见依赖项,当您处理大型项目时,使用require样板将文件的一半混乱变得很烦人.很高兴有替代品 (3认同)
  • 但是,这个想法是每个文件都是一个完全定义的单元,理论上你可以将它从一个项目中取出并放在另一个项目中,它仍然清楚它的依赖关系是什么(有时)甚至在哪里找到它们.显然,如果你只想获得绝对最小的文件,你仍然可以解决这个问题,但它有助于将其视为文档而不是杂乱本身. (3认同)

小智 16

首先,对于你的例子,大卫是正确的.在你需要的每个模块中包含所有依赖项.它非常详细,但没有编译时间魔法可以减轻各种反模式和潜在的未来问题.

真正的答案.

这并不总是实用的.Browserify接受一个名为的选项insertGlobalVars.在构建时,扫描每个流式文件以查找与提供的密钥名称匹配的标识符,并将模块包装在包含解析模块中未分配的每个标识符的参数的IIFE中.这一切都发生在依赖树最终确定之前,这允许您使用require来解析依赖关系.

TLDR

insertGlobalVars在Browserify中使用选项.

browserify({
  insertGlobalVars: {
    spine: function(file, dir) {
      return 'require("spine")';
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

对于扫描的每个文件,如果spine存在未分配的标识符,请解析为require("spine").