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

Question

到目前为止，我一直在将所有JS文件附加在一起并一次性加载它们，这非常有用。我一直在使用grunt加载它们。但是，我注意到的一件事是订单问题。如果我有一个继承链，如Entity =＆gt;字符=＆gt;播放器我需要先加载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模块语法。

---

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