How To Bundle JS Files Into One

When your js project becomes bigger and bigger, there may be a lot of js files in it. And you have to import them into your Html file source code one by one and in order. This may make mistakes. For example, you miss importing some js files or import them in the wrong order in the Html source code. This article will tell you how to bundle all your js files into one and import the single js file into the Html file source code. This can reduce errors happen.

1. How To Use Browserify To Bundle JS Files Into One.

1. Browserify is a tool that can bundle all your js files and related dependencies js module files into one file.
2. This section will tell you how to install Browserify and how to use it to bundle multiple js files and dependencies into one file.

1.1 How To Install Browserify.

1. Browserify is an NPM module, so you should first install Node.js and NPM on your OS. Please refer How To Install Node JS In Windows, How To Install / Uninstall Node JS, NPM On Mac.
2. Then open a terminal and run the command npm install -g browserify to install the browserify npm module.

   > npm install -g browserify
   npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
   
   added 183 packages, and audited 184 packages in 1m
   
   44 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities

3. Run the command npm list -g browserify in the terminal to confirm that the Browserify module has been installed successfully, this command will show the module version & installed directory.

   PS C:\Windows\system32> npm list -g browserify
   C:\Users\Jerry\AppData\Roaming\npm
   `-- browserify@17.0.0

1.2 How To Use Browserify To Bundle JS Files & Dependencies Into One File.

1. Now I will tell you how to use Browserify to bundle js files into one.
2. Create a folder browserify-example, and add a subfolder js under it.
3. Add 2 js files test1.js & test2.js in the js folder.
4. Open a terminal and go to the browserify-example folder.
5. Then run the command npm init in the terminal to initialize the project, this command will create a file package.json.

   tree ./ /f
   D:\WORK\DEV2QA.COM-EXAMPLE-CODE\PYTHONEXAMPLEPROJECT\HTML\BROWSERIFY-EXAMPLE
   │  package.json
   │
   └─js
        test1.js
        test2.js

6. Now you can run the command browserify ./js/test1.js -o build.js in the terminal to bundle test1.js and related dependencies js files to the build.js file.
7. If you meet the error ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ when you execute the above command, you can read the article How To Use Babel To Fix ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ to learn how to fix it.
8. And you can view the file build.js content, the build.js file content contains all your project js files and dependent js module’s source code using ES2015 code syntax.
9. Now you can include the build.js js file in your Html source code using the Html script tag as below.

   <script type="text/javascript" src="build.js"></script>