{"id":5053,"date":"2024-10-14T07:01:22","date_gmt":"2024-10-14T07:01:22","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=5053"},"modified":"2024-10-14T09:36:31","modified_gmt":"2024-10-14T09:36:31","slug":"how-to-include-javascript-file-in-another-javascript-file","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/","title":{"rendered":"How to Include JavaScript File in Another JavaScript File"},"content":{"rendered":"\n<p>Often web developers need to include a JavaScript file in another JavaScript file to avoid code rewrite and make their code modular. It is also required if you have large amount of JS code and you want to split it across multiple files. There are several ways to do this. In this article, we will learn how to import a JavaScript file into another JavaScript file. You can use these methods to import one or variables as well as functions from one file to another. They are supported by most modern web browsers.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#What_are_ES6_Modules\" >What are ES6 Modules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#How_to_Include_JavaScript_File_in_Another_JavaScript_File\" >How to Include JavaScript File in Another JavaScript File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#1_Using_ExportImport\" >1. Using Export\/Import<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#2_Using_ES6_Modules\" >2. Using ES6 Modules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#3_Using_DOM_Manipulation\" >3. Using DOM Manipulation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#4_Import_Multiple_Files\" >4. Import Multiple Files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#5_Dynamic_Imports_Using_AsyncAwait\" >5. Dynamic Imports Using Async\/Await<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#Benefits_of_Importing_JS_File\" >Benefits of Importing JS File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_are_ES6_Modules\"><\/span>What are ES6 Modules<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before we proceed, we need to learn a bit about ES6 modules. ES6 stands for <a href=\"https:\/\/www.w3schools.com\/js\/js_es6.asp\" target=\"_blank\" rel=\"noreferrer noopener\">ECMA Script 6<\/a>, launched in 2015. It is a core JavaScript feature that allows you to easily import external JavaScript files to other JavaScript\/HTML files. An ES6 module is simply a JavaScript file whose variables and functions can be exported to other files, and which can also import functions &amp; variables from other files. It is supported by many modern browsers. It allows you to split your code into multiple files and directories, such that their contents can be accessed by each other. It is very useful in building JS libraries and modules. Before 2015, this was not supported and developers had to rely on third party JS libraries for this purpose.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Include_JavaScript_File_in_Another_JavaScript_File\"><\/span>How to Include JavaScript File in Another JavaScript File<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are several ways to include JavaScript File to another. Let us look at each of them in detail. Let us say you have 3 files &#8211; 1 HTML file test.html, and 2 JavaScript files main.js and lib.js. Let us see how to use them as per various use cases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Using_ExportImport\"><\/span>1. Using Export\/Import<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this approach, we include JavaScript file using import\/export keywords natively supported by JavaScript ES6. Let us say you have the following function in lib.js to add 2 numbers. We have also included a test_var just to demonstrate how to export variables.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">export function add(a, b){<br>  return a+b;<br>  }<br><br>export test_var='hello world';<\/pre>\n\n\n\n<p>Please note, unlike regular JavaScript functions, we have added <em>export<\/em> keyword at the beginning of our function and variable, indicating that they can be exported to other files.<\/p>\n\n\n\n<p>Let us import this function as well as the variable in main.js file. You need to use<em> import { object1, object2, &#8230;}<\/em> syntax to import functions and variables from another file. In this case, both variables and functions are seen as JS objects.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { add, test_var } from \".\/lib.js\"<\/pre>\n\n\n\n<p>Here both lib.js and main.js files are in the same directory. If the JS file is in a different directory than JS module, then you need to specify the directories as per your requirement.<\/p>\n\n\n\n<p>Thereafter, you can use it in a regular JS code. Here is an example to use it in regular JS function.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function hello(){<br>  console.log(add(1,2)); \/\/prints 3 in console<br>}<\/pre>\n\n\n\n<p>Or in another function that can also be exported.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">export function hello(){<br>  console.log(add(1,2)); \/\/prints 3 in console<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Using_ES6_Modules\"><\/span>2. Using ES6 Modules<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the above case, we learnt how to import one JS file to another. What if you want to include JavaScript file into an HTML file? You can do this by using script tag, as you would do to import any JS file, along with mentioning type=&#8221;module&#8221;, in the head or body of the page.. Let us say you have the following HTML code in file test.html.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br>&lt;html lang=\"en\"&gt;<br>  &lt;head&gt;<br>      <strong>&lt;script src=\"main.js\" type=\"module\"&gt;&lt;\/script&gt;<\/strong><br>  &lt;\/head&gt;<br>  &lt;body&gt;<br>      Hello World<br>  &lt;\/body&gt;<br>&lt;\/html&gt;<\/pre>\n\n\n\n<p>The type=&#8217;module&#8217; attribute of script tag allows your JS file to contain import and export statements.<\/p>\n\n\n\n<p>Alternatively, you can add an import statement in script tag as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br>&lt;html lang=\"en\"&gt;<br>  &lt;head&gt;<br>      <strong>&lt;script type=\"module\"&gt;<\/strong><br>          <strong> import { add } from \".\/lib.js\"<br>           console.log(add(1, 2)); \/\/prints 3 in console<\/strong><br>      <strong>&lt;\/script&gt;<\/strong><br>  &lt;\/head&gt;<br>  &lt;body&gt;<br>      Hello World<br>  &lt;\/body&gt;<br>&lt;\/html&gt;<\/pre>\n\n\n\n<p>You can also these script tags in HTML body, if you want.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Using_DOM_Manipulation\"><\/span>3. Using DOM Manipulation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Another simple way to include JS file into your web page is by dynamically adding the script tag that imports JS file to it. In this case, we will use JavaScript code to include JavaScript file to another file. Here is a sample code to import main.js file to test.html using plain JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>&lt;head><br>\t&lt;title><br>\t\tImporting JS file to HTML<br>\t&lt;\/title>\t<br>\t<strong>&lt;script type=\"text\/javascript\"><br>\t\tlet script = document.createElement('script');\t\t<br>\t\tscript.src =\".\/main.js\";\t\t<br>\t\tdocument.head.appendChild(script)<br>\t&lt;\/script><\/strong><br>&lt;\/head><br>&lt;\/html><\/pre>\n\n\n\n<p>In the above HTML code, we first create a script tag. Inside this script tag, we add the JavaScript code to import our main.js file. For this, we create another script tag using document.createElement() function. Then we set its src attribute to the location of main.js. Lastly, we append the newly created script tag to the head of the web page, using document.head.appendChild() function. This will execute any function calls in main.js.<\/p>\n\n\n\n<p>It is very flexible and easy way to import JS files into other files, without using modules. It also provides good control as to when you want the JS file to be available since you can add the script tag as and when required.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Import_Multiple_Files\"><\/span>4. Import Multiple Files<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can use the above method to include multiple files in your web page. Let us create a JavaScript function where we accept JS file path as input, create a script tag with this path as its src attribute and then append the script tag to the head of the page.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function js_include(file_path) {<br> <br>    let script = document.createElement('script');<br>    script.src = file_path;<br>    script.type = 'text\/javascript';<br>    script.defer = true;<br> <br>    document.getElementsByTagName('head').item(0).appendChild(script);<br> <br>}<br><br>js_include('.\/lib1.js');<br>js_include('.\/lib2.js'); <\/pre>\n\n\n\n<p>Thereafter, you can call this function in your web page as shown in the last 2 lines above. Now if you  put all the above code in another file main.js and import it to your web page, then it will automatically also import lib1.js and lib2.js.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>&lt;head><br>\t<strong>&lt;script type=\"text\/javascript\" src=\".\/main.js\">\t&lt;\/script><\/strong><br>&lt;\/head><br><br>&lt;body><br>&lt;\/body><br>&lt;\/html><br><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Dynamic_Imports_Using_AsyncAwait\"><\/span>5. Dynamic Imports Using Async\/Await<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If the imported file is too large, and you are not sure if you want to import it immediately, then you can use Aync\/Await feature to import this file only when you need it. This improves page load speed by not importing your file upfront. Here is the lib.js file as defined before.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">export function add(a, b){<br>  return a+b;<br>  }<br><br>export test_var='hello world';<\/pre>\n\n\n\n<p>Here is the code in main.js to import lib.js file only when a button is clicked.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const button = document.querySelector(\"button\");<br>button.addEventListener(\"click\", async () =&gt; {<br>  const lib = await import(\".\/lib.js\");<br>  console.log(lib.add(1,2));<br>});<\/pre>\n\n\n\n<p>In the above code, we use import() function along with path to lib.js to import the file. But we call it after await keyword so that it is not called right away but only returns a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noreferrer noopener\">promise<\/a>. This whole thing happens inside the click event handler of the button element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Benefits_of_Importing_JS_File\"><\/span>Benefits of Importing JS File<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are several benefits of using JavaScript modules:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>JS modules make it easy to break your code into smaller pieces that are easy to manage.<\/li>\n\n\n\n<li>It reduces code rewriting and modularizes your code.<\/li>\n\n\n\n<li>It makes your code easy to understand.<\/li>\n\n\n\n<li>It allows you to easily reuse code from other parts of your application, without having to build things from scratch.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt several different ways to include JavaScript file to another JavaScript file using modules. However, there are key points to remember while working JS modules. First, they always use strict mode and their functions and variables are available only to those files where they are imported. They are not available to the global namespace. Also, they cannot be loaded locally using file:\/\/ protocol but only from within another HTML or JS file. You can use any of these methods as per your requirement.<\/p>\n\n\n\n<p>Also read:<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-clone-object-in-javascript\/\">How to Clone Objects in JavaScript<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-detect-browser-in-javascript\/\">How to Detect Browser in JavaScript<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-check-if-element-is-hidden-in-jquery\/\">How to Check if Element is Hidden jQuery<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-access-correct-this-inside-callback\/\">How to Access Correct This Inside Callback<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes web developers need to import JavaScript File into another JS File. Here is how to do this.<\/p>\n","protected":false},"author":1,"featured_media":5089,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[295],"tags":[320],"class_list":["post-5053","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-import-js-module"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Include JavaScript File in Another JavaScript File - Ubiq BI<\/title>\n<meta name=\"description\" content=\"Sometimes web developers need to import JavaScript File into another JS File. Here is how to include JavaScript file in another file.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Include JavaScript File in Another JavaScript File - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"Sometimes web developers need to import JavaScript File into another JS File. Here is how to include JavaScript file in another file.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-14T07:01:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-14T09:36:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/10\/import-javascript-file-to-another-file.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"308\" \/>\n\t<meta property=\"og:image:height\" content=\"204\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How to Include JavaScript File in Another JavaScript File\",\"datePublished\":\"2024-10-14T07:01:22+00:00\",\"dateModified\":\"2024-10-14T09:36:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/\"},\"wordCount\":1181,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1\",\"keywords\":[\"import js module\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/\",\"name\":\"How to Include JavaScript File in Another JavaScript File - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1\",\"datePublished\":\"2024-10-14T07:01:22+00:00\",\"dateModified\":\"2024-10-14T09:36:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"Sometimes web developers need to import JavaScript File into another JS File. Here is how to include JavaScript file in another file.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1\",\"width\":308,\"height\":204,\"caption\":\"import javascript file to another file\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-include-javascript-file-in-another-javascript-file\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Include JavaScript File in Another JavaScript File\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sreeram-sreenivasan\\\/\"],\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/author\\\/wordpress\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Include JavaScript File in Another JavaScript File - Ubiq BI","description":"Sometimes web developers need to import JavaScript File into another JS File. Here is how to include JavaScript file in another file.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/","og_locale":"en_US","og_type":"article","og_title":"How to Include JavaScript File in Another JavaScript File - Ubiq BI","og_description":"Sometimes web developers need to import JavaScript File into another JS File. Here is how to include JavaScript file in another file.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2024-10-14T07:01:22+00:00","article_modified_time":"2024-10-14T09:36:31+00:00","og_image":[{"width":308,"height":204,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/10\/import-javascript-file-to-another-file.jpg","type":"image\/jpeg"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How to Include JavaScript File in Another JavaScript File","datePublished":"2024-10-14T07:01:22+00:00","dateModified":"2024-10-14T09:36:31+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/"},"wordCount":1181,"commentCount":0,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/10\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1","keywords":["import js module"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/","name":"How to Include JavaScript File in Another JavaScript File - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/10\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1","datePublished":"2024-10-14T07:01:22+00:00","dateModified":"2024-10-14T09:36:31+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"Sometimes web developers need to import JavaScript File into another JS File. Here is how to include JavaScript file in another file.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/10\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/10\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1","width":308,"height":204,"caption":"import javascript file to another file"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-include-javascript-file-in-another-javascript-file\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How to Include JavaScript File in Another JavaScript File"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/10\/import-javascript-file-to-another-file.jpg?fit=308%2C204&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-1jv","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=5053"}],"version-history":[{"count":49,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5053\/revisions"}],"predecessor-version":[{"id":5113,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5053\/revisions\/5113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/5089"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=5053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=5053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=5053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}