This problem is so simple and common but I still haven’t been able to find a good solution for it. So I thought maybe some experts here in Stackoverflow can guide me about the best practices.
Let’s say I have a several Javascript modules and put each of them in a separate file:
a.js
b.js
c.js
d.js
When releasing the software, I join them together and minify them:
//pseudo command:
cat a.js b.js c.js d.js | minify > all.js
Then I include reference to all.js in my html files like this:
<script src="all.js"></script>
So far so good. The problem is that when developing the software, I want to see the files as unminified and uncombined. One solution is to eliminate the minification from the process and do it like:
//pseudo command:
cat a.js b.js c.js d.js > all.js
and include it with the <script> tag. This works but I rather want to have the files included separately. So I have to do this in my html files:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
This one works as I intended but then when releasing the code I have to go through all my html files and replace those 4 <script> tags with <script src="all.js"></script> and that is too much work for my project because there are many html files and we have debug/release cycles regularly.
One solution can be to have the script tag for all the files:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
<script src="all.js"></script>
But this results to 4 erroneous requests at runtime. (because only all.js is available at release time).
How would you solve this problem?
Why don’t you use a javascript loader like headjs and serve your files dynamically?
Then when you go into production, you just need to modify the headJs call and include only the minified js file.