Open In App

What is the role of src and dist folders in JavaScript/jQuery ?

Last Updated : 15 Apr, 2020
Like Article

Using a standard folder structure is not an absolute requirement, but it is highly recommended based on what the JavaScript/jQuery community has been following by convention.

Some common directories are lib/, src/, build/, dist/, bin/, test/, unit/, integration/, env/

src: It stands for source and is the raw code before minification or concatenation or some other compilation it has been used to read or edit the code.

  1. The src stands for source.
  2. The /src folder comprises of the raw non-minified code.
  3. The /src folder is used to store the file with the primary purpose of reading (and/or editing) the code.
  4. The /src folder contains all the sources, i.e. the code which is required to be manipulated before it can be used.
  5. Depending on the project, the /src folder may contain only the pure sources, or the non-minified versions.
  6. So, the /src folder is primarily used to store the source code files before any minification.

dist: It stands for distribution and is the minified or concatenated version it has been actually used on production sites.

  1. The /dist stands for distributable.
  2. The /dist folder contains the minimized version of the source code.
  3. The code present in the /dist folder is actually the code which is used on production web applications.
  4. Along with the minified code, the /dist folder also comprises of all the compiled modules that may or may not be used with other systems.
  5. It is easier to add files to the /dist folder as it is an automatic process. All the files are automatically copied to the dist folder on save.
  6. The /dist folder also contains all those files which are required to run/build a module for use with other platforms- either directly in the browser, or in an AMD system (eg. require.js).
  7. Ideally, it is considered a good practice to clean the /dist folder before each build.

Example: The source code of any program or library is present in the /src directory. Now, if one wishes to use the source code of a certain library(C, C++, Java, etc.) which was written by another person, then they need to compile the source code first before being able to use it. If this source code does not comply then it would not be possible to use them. However, if somehow, a precompiled version of the source code is already available, then one does not need to go through the task of compiling the source code files and it can be directly used. Such an already compiled version is saved into the /dist directory.

Likewise, if one wishes to share a JavaScript library, one should add the original (not minified) source code into the src/ folder and the minified (precompiled) version into the dist folder. By doing so, anyone can use the minified version of the code right away without having to minify it themselves.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads