javascript - How do you manage dependencies during concatenation? -

i've been appending js files , load them in 1 lump sum far, , works great. i've been using grunt load them. however, 1 thing notice order matters. if have inheritance chain such entity => character => player need entity.js loaded first.

how can control appending order , manage dependencies? or job requirejs?

use module bundler, such browserify, webpack or requirejs.

with browserify/webpack (or 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() 

---

or if prefer amd , requirejs (or using browserify/webpack amd transform):

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() }) 

it's worth noting here webpack can load modules both sync , async: var sync = require('./sync') , require(['./async'], function(async) {}).

also replace inherits whatever prototypal inheritance method prefer. prefer node.js's: http://nodejs.org/api/util.html#util_util_inherits_constructor_superconstructor or https://npmjs.org/package/inherits

---

es6, next version of javascript, has spec module syntax. sometime in future proper module loading built language. this:

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

there loaders webpack , requirejs load modules in syntax well: es6 module transpiler (deprecated in favor of babel , esperanto) , es6-loader (deprecated in favor of babel-loader).

edit: es6ify supports es6 module syntax use browserify.

---

in opinion, concatenating modules old fashion. use module bundler , open doors many wonderful things provide.