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

15 Apr, 2020
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.
src/
The src stands for source.The /src folder comprises of the raw non-minified code.The /src folder is used to store the file with the primary purpose of reading (and/or editing) the code.The /src folder contains all the sources, i.e. the code which is required to be manipulated before it can be used.Depending on the project, the /src folder may contain only the pure sources, or the non-minified versions.So, the /src folder is primarily used to store the source code files before any minification.
The src stands for source.
The /src folder comprises of the raw non-minified code.
The /src folder is used to store the file with the primary purpose of reading (and/or editing) the code.
The /src folder contains all the sources, i.e. the code which is required to be manipulated before it can be used.
Depending on the project, the /src folder may contain only the pure sources, or the non-minified versions.
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.
dist/
The /dist stands for distributable.The /dist folder contains the minimized version of the source code.The code present in the /dist folder is actually the code which is used on production web applications.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.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.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).Ideally, it is considered a good practice to clean the /dist folder before each build.
The /dist stands for distributable.
The /dist folder contains the minimized version of the source code.
The code present in the /dist folder is actually the code which is used on production web applications.
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.
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.
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).
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.
Picked
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
How to Dynamically Add/Remove Table Rows using jQuery ?