如何在连接期间管理依赖项？

Question

我一直在将所有JS文件附加在一起,并且到目前为止一次性加载它们,这很有效.我一直在使用grunt加载它们.但是,我注意到的一件事是订单问题.如果我有一个继承链,如Entity => Character => Player,我需要先加载Entity.js.

如何控制附加顺序和管理依赖项？或者这是RequireJS的工作吗？

Answer 1

使用模块捆绑器,例如Browserify,Webpack或RequireJS.

使用browserify/webpack(或commonjs loader和requirejs):

player.js

var Character = require('./character')
function Player() { Character.call(this) }
inherits(Player, Character)
module.exports = Player

character.js

var Entity = require('./entity')
function Character() { Entity.call(this) }
inherits(Character, Entity)
module.exports = Character

entity.js

function Entity() {}
module.exports = Entity

app.js

var Player = require('./player')
var player = new Player()

或者,如果您更喜欢AMD和requirejs(或使用Browserify/webpack AMD转换):

player.js

define(['./character'], function(Character) {
  function Player() { Character.call(this) }
  inherits(Player, Character)
  return Player
})

character.js

define(['./entity'], function(Entity) {
  function Character() { Entity.call(this) }
  inherits(Character, Entity)
  return Character
})

entity.js

define(function() {
  function Entity() {}
  return Entity
})

app.js

require(['./player'], function(Player) {
  var player = new Player()
})

值得注意的是,webpack可以加载同步和异步的模块:var sync = require('./sync')和require(['./async'], function(async) {}).

也可以替换inherits您喜欢的任何原型继承方法.我更喜欢node.js:http://nodejs.org/api/util.html#util_util_inherits_constructor_superconstructor或https://npmjs.org/package/inherits

ES6是javascript的下一个版本,它有一个模块语法规范.所以在将来的某个时候,正确的模块加载将被内置到该语言中.它可能看起来像这样:

import Character from "character"
function Player() { Character.call(this) }
inherits(Player, Character)
export default = Player

有webpack和requirejs的加载器也可以用这种语法加载模块:ES6 Module Transpiler(不赞成使用Babel和Esperanto)和es6-loader(不赞成使用babel-loader).

编辑:es6ify现在支持与browserify一起使用的es6模块语法.

在我看来,连接模块是旧时尚.使用模块捆绑器,打开他们提供的许多美妙事物的大门.