I have a very old AngularJS project which is quite big. Instead of creating a bundled .js file composed of all the required code, this project is organized in the following way:

• All the .js files are directly loaded in index.html with a <script src="path/to/js">

• Even the dependencies minified .js files are loaded in the same way, examples:

  <script src="bower_components/angular-route/angular-route.min.js"></script>
  <script src="bower_components/angular-resource/angular-resource.min.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
  

• The code makes vast use of definitions (functions, classes, enums and so on) declared in different .js files without importing them (because they are all available globally). Examples:

  // inside one file, PastFuture is not declared here
  if (self.pastFuture === PastFuture.FUTURE) {
    ... // do something
  }
  
  // inside another file, it is not exported or anything, it is just defined
  const PastFuture = {
    PAST: 'PAST',
    FUTURE: 'FUTURE'
  };
  

I want to migrate this project into something a bit more "standard". I've removed bower for npm dependencies but now I'm stuck at forcing all these .js files to get bundled together.

The major problem of the code is that once bundled with browserify, all the definitions not imported stops working, for example, PastFuture is not defined unless I import it manually wherever is required.

Is there a way to overcame / solve this problem without adding exports and require in all the files of the project?

I was thinking that if I concatenate all those .js files instead of trying to make them require each other, it would have the safe effect without the need to add exports and imports.. but as a solution, it just sounds like a hack to me and I was searching for something more correct.