0

I have a two different javascript files that I am using with my GAE Python app, and each of these depend on common functionality that I don't want to repeat in two different places.

In my development environment, I'd like to have three files:

  • script1.js
  • script2.js
  • library.js

where each of script1.js and script2.js need functionality in library.js.

My javascript uses the "revealing module pattern", e.g.,

var my_module = (function() {
    var my = {};
    my.do_stuff = function() {...};
    return my;
})();

But in production, I want clients to be able to download one static file that has all needed javascript. For example a client could download script1all.js that will include script1.js and library.js.

How can I implement this in GAE/P? Is there an existing tool that does this?

I've been reading about javascript package managers (npm, bower, etc), but these seem related to handling third party javascript, where I just need to package my own javascript.

new name
  • 15,861
  • 19
  • 68
  • 114

1 Answers1

1

I've spent the last 3 hours reading about this, and I'm somewhat blown away by the complexity and variations that exist with javascript modules and bundling.

I found tools like Browserify and Webpack, but as I learned about them I had to refresh myself about javascript modules. This is a great resource for understanding javascript module options.

For my javascript, I've been using the "revealing module pattern" discussed in the linked article. For this style of javascript modules, it seems that the simple concatenate and minify approach is a perfectly good solution. This is another article that lays out bundling options.

So after hours of educating myself, I'll do the simple concatenate and minify approach, and I'll eventually upgrade to ES6.

P.S.: This answer was also very helpful in understanding the different categories of javascript processing that one might need.

Community
  • 1
  • 1
new name
  • 15,861
  • 19
  • 68
  • 114