How to include js into js

How to include a JavaScript file in another JavaScript file?

Learn How to Include a JavaScript File in Another JavaScript File.

Overview

We can include a JavaScript file in another JavaScript file using the native ES6 module system. This allows us to share code between different JavaScript files and achieve modularity in the code. There are other ways to include a JS file like Node JS require, jQuery’s getScript function, and Fetch Loading.
In this article, we are going to go through each method in detail.

Scope

What are ES6 Modules?

In the early era of the web, the role of JavaScript was limited to form validation and providing a little bit of interactivity, so large scripts were not needed.

Today, JavaScript has become a primary language to develop web apps, including both backend and frontend. Thus the size of the JS programs has also grown exponentially, making it harder to manage code.

This motivated the use of module system, a way to divide the code into multiple files and directories but still make sure all the bits of code can access one another.

An ES6 module is just a file containing JS code with two special characteristics:

Let’s discuss different ways to achieve modularity and learn how to import a JS file into a JS file.

Takeaway:

An ES6 module is a JS file that can export its code to share with other files and import and use code from other JS files.

Popular Ways to Include a JavaScript File in Another JavaScript File

In this section, we will learn about two popular ways of including a JS file in another JS file:

Using import/export | ES6 module

Let’s start by using the ES6 way of importing and exporting. Create a file named utils.js and define the following function and constant inside it:

Notice that we used the export keyword before the function and variable to specify that these objects can be used by other files.

Now, create another file named main.js and write the following code in it:

Using Default Exports

We can use the default keyword to export one object by default from a file. What does this mean? Let’s see with an example. Make the greet function in utils.js a default export by adding default before it:

Now, you can import it in main.js like this:

It will work the same as before!

Note рџ“ќ:

Let’s discuss some important points related to ES6 modules that one should remember when using them:

We have to remove the curly braces when importing default exports.
For instance, if we have kept the braces in the randomName example above like this:

It would have thrown an error saying no such export exists.

A file can contain multiple exports. However, we can only define a single default export in a file.
Thus the following JavaScript code is invalid вќЊ:

We cannot use an alias name when importing a normal export.
Thus the following import is invalid вќЊ:

We must use the same name when importing a normal export.

We can mix default and normal exports like this:

We can import an entire module’s content using the * :

Then, you can access all the export using the module as a namespace:

You can export all the objects together at the end of the file Example:

You can rename exports and imports

This could help manage name conflicts between similar imports.

Now, we will see how to run these ES6 modules inside a browser.

Using ECMAScript (ES6) modules in browsers

Most modern browsers like chrome, safari and firefox have support for running ES6 modules directly. Let’s try running the modules created before in a browser.

In the previous section, we created two JS files with the following code:

In the main.js file, we imported and used a function from utils.js using the import keyword.

Now, we want to run main.js using a browser by linking the main.js module to an HTML file.

Therefore, create an index.html file and include the main.js script as follows:

We need the type=»module» attribute in the

Now keep the utils.js as follow:

And add the following code to main.js :

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is the output for the above code:

Takeaway:

Dynamic Script Loading

We can avoid the use of jQuery’s getScript function by injecting a script tag ourselves.

This is how you would do it in the main.js file:

Explanation We created a script tag and set its source attribute to the path of the JavaScript file. Then we appended the script tag to the body element.
Check the console now and you will see the same output as before.

Concatenate Files

Create a file first.js with the following code:

Create another file second.js as follows:

Now, in the main.js you can include both files as follows:

It’s the same code as before but now in a function. Making it easier to call it multiple times. You only need to include the main.js file in the HTML, the other two files will be included automatically.

Takeaway:

We can dynamically insert a script tag using DOM manipulation to load and execute a JS file without jQuery.

Detecting When the Script has Been Executed

Now, there is a problem with the above solution (Dynamic script loading). If we try to access a variable from the imported file just after appending it to the HTML, we will run into an error because the browsers load JS files asynchronously (simultaneously) to improve performance.

For example, if this is the utils.js file:

And we are trying to access the message constant in main.js like this:

We will run into the following error:

To solve this, we must make sure that any code in main.js that uses the objects from utils.js is run after the file is loaded.
For this, we can use a callback function on the onload attribute of the script tag:

Takeaway:

Use the onload event of the script element to run some code only when the script is loaded.

How to import/include source files in JavaScript? [duplicate]

Does it make sense? Can I do that in JavaScript?

3 Answers 3

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can’t specify imports in vanilla javascript.

So your solutions (excluding heavy server side frameworks) are :

simply do the imports

concatenate your js files (and minify them in the same move, for exemple using the closure compiler)

use a module itool like require.js

As long as you’re not experienced, and if your number of files is low (less than 15), I recommend to simply choose the first or second solution. Using a module loader may have side effects you don’t want to debug when beginning to learn javascript.

if you want to do it directly from the JS, you may use Ajax, this post explains how to: include-javascript-file-inside-javascript-file

You can bundle JavaScript (and also CSS) files together using certain tools to reduce the number of files you must include. This also increases page load performance.

These tools combine multiple JavaScript files into a single JavaScript file (optionally minifying the files as well), and multiple CSS files into a single CSS file. This results in fewer HTTP connections from the browser to the server, so there are fewer things to be fetched serially.

ASP.Net MVC 4 has built-in support for this:

There are a number of solutions for other environments as well such as Juicer.

How to include JavaScript file into another JavaScript file?

JavaScript was never designed to be what it is today. At first, it was suppose to add tiny dynamic features to websites. Today we can build complete software solutions just with JavaScript. That is why we did not even had way to share code between two files. Let`s look at couple ways how to do it modern JavaScript.

In this article we will have a look at couple of different ways to include JavaScript files to other JavaScript files. We will do this in two environments, one is JavaScript within browser and second will be using Node.js.

If you don’t have Node installed, read how to install Node.js here.

It was not possible to include JavaScript from another JavaScript

Back in the day, there was really no way how to include JS files. There was no mechanism to do this.

Thankfully, these days, with the extreme rise of JavaScript and module patterns, we have actually couple of ways to do this.

Two different environments

As already mentioned, we will experiment with two environments, browser or client and Node.js or server.

JavaScript in the browser

This is as basic HTML file as it gets, but pay attention to the script tag. We have to specify the type=“module” here, if we want to import our xyz.js file.

To run these examples, you will need to serve these files from server. You can install Live Server extension on your VSCode on the link below:

Now, when we serve our index.html and open up console in our browser, we will see XYZ logged. Awesome!

Include multiple functions

To have multiple functions available, we need to just add them as our identifiers like so:

And also adjust our app.js similarly:

Exporting JavaScript functions directly

You can actually find examples that export the function directly, so let’s have a look at that example:

and the app.js

Pretty simple. Alright, this is how we include JavaScript files inside another JavaScript file when working with browser JavaScript. Now, let’s have a look at Node.js solutions.

Node.js doesn’t support ES6 import

Yes, it is true. At the time of writing this article, Node.js doesn’t support ES6 import. Node has its own way. Node actually relies heavily on the concept of modules. Let’s import some files in Node.js environment.

Requiring is Node way of importing. When you work with Node, you see it all over the place. Requiring modules left and right.

Interesting thing is, require returns the module.exports object with the appended attribute, which is our sayXyz function. xyz is the object in this case.

Now if we run app.js from our terminal with Node, we will get XYZ printed to the console.

If we want to export multiple functions, we just append another attribute to the module.exports object like so:

Here are another two ways to the same result. First one, we make module.exports equal to the object we construct. With function attribute.

And the last one, probably the most familiar way:

Bonus: Node import

If you really want to use import in your Node environment, you can achieve it with the help of Babel. Babel is a JavaScript compiler that makes modern JavaScript code available in older, non-compatible JavaScript environments.

All it does with the import statement is, it transpiles the JavaScript into require function so that Node.js understands it. If you are interested in trying it out, read this nice article on Enabling Import in Node.js.

That is it for this article. Have a great one.

How to include js file in another js file? [duplicate]

4 Answers 4

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can only include a script file in an HTML page, not in another script file. That said, you can write JavaScript which loads your «included» script into the same page:

There’s a good chance your code depends on your «included» script, however, in which case it may fail because the browser will load the «imported» script asynchronously. Your best bet will be to simply use a third-party library like jQuery or YUI, which solves this problem for you.

You need to write a document.write object:

and place it in your main javascript file

It is not possible directly. You may as well write some preprocessor which can handle that.

If I understand it correctly then below are the things that can be helpful to achieve that:

Use a pre-processor which will run through your JS files for example looking for patterns like «@import somefile.js» and replace them with the content of the actual file. Nicholas Zakas(Yahoo) wrote one such library in Java which you can use (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)

If you are using Ruby on Rails then you can give Jammit asset packaging a try, it uses assets.yml configuration file where you can define your packages which can contain multiple files and then refer them in your actual webpage by the package name.

Try using a module loader like RequireJS or a script loader like LabJs with the ability to control the loading sequence as well as taking advantage of parallel downloading.

JavaScript currently does not provide a «native» way of including a JavaScript file into another like CSS ( @import ), but all the above mentioned tools/ways can be helpful to achieve the DRY principle you mentioned. I can understand that it may not feel intuitive if you are from a Server-side background but this is the way things are. For front-end developers this problem is typically a «deployment and packaging issue».

Ways to include a JavaScript file in another JavaScript file

How can you reliably and dynamically load a JavaScript file? This will can be used to implement a module or component that when ‘initialized’ the component will dynamically load all needed JavaScript library scripts on demand. The old versions of JavaScript had no import, include, or require, so many different approaches to this problem have been developed. But since 2015 (ES6), JavaScript has had the ES6 modules standard to import modules in Node.js, which is also supported by most modern browsers.

For compatibility with older browsers, build and/or transpilation tools can be used.

ES6 Modules

ECMAScript modules in browsers

Browsers have had support for loading ECMAScript modules directly (no tools like Webpack required) since Safari 10.1, Chrome 61, Firefox 60, and Edge 16. Check the current support at caniuse.

Dynamic imports in browsers

Dynamic imports let the script load other scripts as needed:

Node.js require

The old style of importing modules, still widely used in Node.js, is the module.exports/require system.

There are other ways for JavaScript to include external JavaScript contents in browsers that do not require preprocessing.

AJAX Loading

You could load an additional script with an AJAX call and then use eval to run it. This is the most straightforward way, but it is limited to your domain because of the JavaScript sandbox security model. Using eval also opens the door to bugs, hacks and security issues.

Fetch Loading

Like Dynamic Imports you can load one or many scripts with a fetch call using promises to control order of execution for script dependencies using the Fetch Inject library:

jQuery Loading

The jQuery library provides loading functionality in one line:

Dynamic Script Loading

You could add a script tag with the script URL into the HTML. To avoid the overhead of jQuery, this is an ideal solution.

The script can even reside on a different server. Furthermore, the browser evaluates the code. The