JavaScript: handle include_once / import for PHP

How to include one javascript file into another? How to identify dependencies between code located in different JavaScript files? Solutions to these problems have long been known. Why not try to figure it out on the server?

Problem

From the topic it should already be clear that we will focus on JavaScript on Web pages. In general, it seems to me that many people have been concerned about the issue of include in JavaScript for a long time (for example, here and here ), although maybe I exaggerate the problem somewhat.
In my account at the moment only one application in PHP + (JavaScript + HTML), and somewhere at the end of its development I was completely bored with constantly writing <script> tags to page headers, stuffing a heap of code into one JavaScript file, and the like. things. But the thing I didn’t like most about such an approach was the impossibility of identifying dependencies between code that is in different files.

Ideally, you want to be able to write something like this in the file header:
')
import 'folder/file.js';

Known solutions

Of the solutions I know, there is at least the ability to use lazy loading or SSI and mod_include in Apache.

I do not pretend to originality, especially a similar module I, it seems, met as part of a library. However, I could not easily find the required functionality in the form of a separate library, although the idea was rather simple and it didn’t just occur to me alone. Therefore, I will be glad if they tell in the comments why it is not necessary to do so.

Alternative approach

In general, let's get to the point. Everyone knows and actively uses CSS preprocessors , some of them parse the source file on the server and the client receives one ready-made CSS file. In such preprocessors, there is undoubtedly the ability to include other files. I suggest using a similar approach for javascript.

After spending a little time, I got a module called JsPPP ( source codes and tests can be found on googlecode). Consider the final use of this module.

• First you need to download the latest version of the library.
• Place the contents of the archive in any directory on the server. For definiteness, let it be the jsppp directory in the root directory.
• Now it remains to type in the address bar of your browser something like yourdomain.com/jsppp/js.php?test.js . If you saw the contents of two files, then everything works.

Refer to the test.js file:

 //#>import 'subdir/test2.js' function test1() { alert('test1'); } 

As you have already guessed, the code //#>import 'subdir/test2.js' connects the subdir / test2.js file to the test.js file when passing it through js.php. The last thing you need to know to use this functionality: in the js.php file, it is easy to find the name of the directory in which all the JavaScript files of the project are located (that is, the one against which the included files will be searched). This path is passed as a parameter to the constructor to the JsPreprocessor object. It needs to be fixed on the one you need.

Enable javascript in the old manner

And so, the js.php file processes the javascript file and outputs one javascript grouped with all dependencies. Just in case, there is additional functionality that allows for a file with directives in the above format to get a set of <script src="..."></script> to connect all the files on which it depends.
This is done by calling the GetScriptLinks function:

 echo $preprocessor->GetScriptLinks("filename.js", "www_path_to_js_dir"); 

At last

Of course, the library is marked with version 0.1. This means that if it suddenly turns out that all this is not complete nonsense, you can do the following:

• Run the cache on the server.
• Work out the client cache (ETag, If-Modified) and redirect 301.
• Connect the minimizer.
• Make the option of processing directives through lazy loading.