How do I include a JavaScript file in another JavaScript file?

Question

How do I include a JavaScript file inside another JavaScript file, similar to @import in CSS?

user_9951 · Answer

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 tools like Webpack and Rollup and/or transpilation tools like Babel can be used.

ES6 Modules

ECMAScript (ES6) modules have been supported in Node.js since v8.5, with the --experimental-modules flag, and since at least Node.js v13.8.0 without the flag. To enable "ESM" (vs. Node.js's previous CommonJS-style module system ["CJS"]) you either use "type": "module" in package.json or give the files the extension .mjs. (Similarly, modules written with Node.js's previous CJS module can be named .cjs if your default is ESM.)

Using package.json:

{
    "type": "module"
}

Then module.js:

export function hello() {
  return "Hello";
}

Then main.js:

import { hello } from './module.js';
let val = hello();  // val is "Hello";

Using .mjs, you'd have module.mjs:

export function hello() {
  return "Hello";
}

Then main.mjs:

import { hello } from './module.mjs';
let val = hello();  // val is "Hello";

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. There is no need to use Node.js' .mjs extension; browsers completely ignore file extensions on modules/scripts.

// hello.mjs -- or the extension could be just `.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Read more at https://jakearchibald.com/2017/es-modules-in-browsers/

Dynamic imports in browsers

Dynamic imports let the script load other scripts as needed:

Read more at https://developers.google.com/web/updates/2017/11/dynamic-import

Node.js require

The older CJS module style, still widely used in Node.js, is the module.exports/require system.

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

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:

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery Loading

The jQuery library provides loading functionality in one line:

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

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

user_115160 · Answer

It is possible to dynamically generate a JavaScript tag and append it to HTML document from inside other JavaScript code. This will load targeted JavaScript file.

function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");

user_117263 · Answer

Maybe you can use this function that I found on this page How do I include a JavaScript file in a JavaScript file?:

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}

user_216728 · Answer

I just wrote this JavaScript code (using Prototype for DOM manipulation):

var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

Usage:

Gist: http://gist.github.com/284442.

user_2889843 · Answer

If you want it in pure JavaScript, you can use document.write.

document.write('');

If you use the jQuery library, you can use the $.getScript method.

$.getScript("another_script.js");

Calmarius_58805 · Answer

You can also assemble your scripts using PHP:

File main.js.php:



// Main JavaScript code goes here

user_860099 · Answer

ES6 Modules

Yes, use type="module" in a script tag (support):

And in a script.js file include another file like this:

import { hello } from './module.js';
...
// alert(hello());

In 'module.js' you must export the function/class that you will import:

export function hello() {
    return "Hello World";
}

A working example is here.

user_8059459 · Answer

There are several ways to implement modules in JavaScript. Here are the two most popular ones:

ES6 Modules

Browsers do not support this moduling system yet, so in order for you to use this syntax you must use a bundler like Webpack. Using a bundler is better anyway because this can combine all of your different files into a single (or a couple of related) files. This will serve the files from the server to the client faster because each HTTP request has some associated overhead accompanied with it. Thus by reducing the overall HTTP request we improve the performance. Here is an example of ES6 modules:

// main.js file

export function add (a, b) {
  return a + b;
}

export default function multiply (a, b) {
  return a * b;
}


// test.js file

import {add}, multiply from './main';   // For named exports between curly braces {export1, export2}
                                        // For default exports without {}

console.log(multiply(2, 2));  // logs 4

console.log(add(1, 2));  // logs 3

CommonJS (used in Node.js)

This moduling system is used in Node.js. You basically add your exports to an object which is called module.exports. You then can access this object via a require('modulePath'). Important here is to realize that these modules are being cached, so if you require() a certain module twice it will return the already created module.

// main.js file

function add (a, b) {
  return a + b;
}

module.exports = add;  // Here we add our 'add' function to the exports object


// test.js file

const add = require('./main');

console.log(add(1,2));  // logs 3

user_5423108 · Answer

Yes, there is...

Keep reading. In ES6, we can export and import part or whole JavaScript file into another one...

But wait, ES6 is not supported in all the browsers, so you need to transpile it using babel.js for example...

So you create a class like below:

class Person {
  constructor(name) {
    this.name = name;
  }

  build() {
    return new Person(this);
  }
}

module.exports = Person;

In another JavaScript file, do the import like:

import { Person } from 'Person';

You also can require the file like:

const Person = require('./Person');

If you are using an older JavaScript version you can use requirejs:

requirejs(["helper/util"], function(util) {
    // This function is called when scripts/helper/util.js is loaded.
    // If util.js calls define(), then this function is not fired until
    // util's dependencies have loaded, and the util argument will hold
    // the module value for "helper/util".
});

If you want to stick to older version of stuff, like jQuery, you can also use something like getScript:

jQuery.getScript('./another-script.js', function() {
    // Call back after another-script loaded
});

Last, but not the least, don't forget you can do the traditional way of putting a script together using the

There are also the async and defer attributes which I should mention here...

Note: There are several ways an external script can be executed:

If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)

If async is not present and defer is present: The script is executed when the page has finished parsing

If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

user_1593459 · Answer

There is also Head.js. It is very easy to deal with:

head.load("js/jquery.min.js",
          "js/jquery.someplugin.js",
          "js/jquery.someplugin.css", function() {
  alert("Everything is ok!");
});

As you see, it's easier than Require.js and as convenient as jQuery's $.getScript method. It also has some advanced features, like conditional loading, feature detection and much more.

user_1602301 · Answer

For Node.js only, this worked for me the best!

I've tried most solutions here, but none helped me about just being able to load another file without changing scope. Finally I used this. Which preserves the scope and everything. It is as good as your code is in that point.

const fs = require('fs');
eval(fs.readFileSync('file.js') + '');

user_193400 · Answer

Here is a Grunt plugin allowing you to use @import "path/to/file.js"; syntax in any file including JavaScript files. It can be paired with uglify or watch or any other plugin.

It can be installed with npm install: https://npmjs.org/package/grunt-import

user_83658 · Answer

In a past project I had quite a bit of success using ajile to do imports of reusable JavaScript files. I always wished there was a feature for this built into JavaScript itself.

user_5934465 · Answer

Here is maybe another way!

In Node.js you can do that just like the following code shows!

sub.js

    module.exports = {
      log: function(string) {
        if(console) console.log(string);
      }
      mylog: function(){
        console.log('just for log test!');
      }
    }

main.js

    const mylog = require('./sub');

    mylog.log('Hurray, it works! :)');
    mylog.mylog();

refs

http://requirejs.org/docs/node.html

user_1783588 · Answer

Import and export modules using ES6 that work with Node.js

Name files with .mjs extension instead of .js

Create files

touch main.mjs lib.mjs

main.js

import { add } from './lib.mjs';
console.log(add(40, 2));

lib.mjs

export let add = (x,y) => {
  return x + y
}

Run

node --experimental-modules main.js

user_1793489 · Answer

I tried this problem with another approach,

Ordering of script importing, has no effect in here.

index.html




    
    Trials
    
    
    



testing js in js (check console logs)

main.js

function fnClick() {
  console.log('From	AAAAA');
  var pro = myExpo.hello();
  console.log(pro);
}

scriptA.js

myExpo = {
    hello: function () {
        console.log('From	BBBBB');
        return "Hello";
    }
}

and the result is

From    AAAAA
From    BBBBB
Hello

user_6798201 · Answer

Dynamically Loading Multiple Scripts In Order

The above function works fine if you are loading only one script or you don't care about the loading order of multiple scripts. If you have some scripts that depends on others, you need to use Promise to specify the order of loading. The reason behind this is Javascript loads resources like scripts and images asynchronously. The loading sequence does not depends on the sequence of asynchronous calls, meaning script1 will not be guaranteed to load before script2 even if you call dynamicallyLoadScript("scrip1") before calling dynamicallyLoadScript("scrip2")

So here's another version of dynamicallyLoadScript that guarantees loading order:

// Based on: https://javascript.info/promise-basics#example-loadscript
function dynamicallyLoadScript(url) {
  return new Promise(function(resolve, reject) {
    var script = document.createElement("script");
    script.src = url;
    script.onload = resolve;
    script.onerror = () => reject(new Error(`Error when loading ${url}!`));
    document.body.appendChild(script);
  });
}

For more on Promises, see this excellent page.

The usage of this new dynamicallyLoadScript is very simple:

dynamicallyLoadScript("script1.js")
  .then(() => dynamicallyLoadScript("script2.js"))
  .then(() => dynamicallyLoadScript("script3.js"))
  .then(() => dynamicallyLoadScript("script4.js"))
  .then(() => dynamicallyLoadScript("script5.js"))
//...

Now the scripts are loaded in the order of script1.js, script2.js, script3.js, etc.

Run dependent code after script loads

In addition, you can immediately run code that uses the scripts after they are loaded. Just add another .then after the loading the script:

dynamicallyLoadScript("script1.js")
  .then(() => dynamicallyLoadScript("script2.js"))
  .then(() => foo()) // foo can be a function defined in either script1, script2
  .then(() => dynamicallyLoadScript("script3.js"))
  .then(() => {
     if (var1){ // var1 can be a global variable defined in either script1, script2, or script3
          bar(var1); // bar can be a function defined in either script1, script2, or script3
     } else {
          foo(var1);
     }
  })
//more .then chains...

Handle loading errors

To display unhandled promise rejections (errors loading scripts, etc), put this unhandledrejection event listener at the top of your code:

// Based on: https://javascript.info/promise-error-handling#unhandled-rejections
window.addEventListener('unhandledrejection', function(event) {
  // the event object has two special properties:
  console.error(event.promise);// the promise that generated the error
  console.error(event.reason); // the unhandled error object
});

Now you will be notified of any script loading errors.

Shortcut Function

If you are loading a lot of scripts without executing code immediately after loading, this shorthand function may come in handy:

function dynamicallyLoadScripts(urls) {
  if (urls.length === 0)
    return;

  let promise = dynamicallyLoadScript(urls[0]);
  urls.slice(1).forEach(url => {
    promise = promise.then(() => dynamicallyLoadScript(url));
  });
}

To use it, just pass in an array of script urls like this:

const scriptURLs = ["dist/script1.js", "dist/script2.js", "dist/script3.js"];
dynamicallyLoadScripts(scriptURLs);

The scripts will be loaded in the order they appear in the array.

user_3058581 · Answer

Please note that we usually use static scripts. So we want to be taken from the cache as much as possible.

This saves network traffic and speeds up landing.

Usage

$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});

The cache: true option has been added to the Ajax method.

user_4058484 · Answer

If you find there are two or more scripts occupying the same function when they are called, and we cannot be include them at the same time, we need to do it dynamically by user selection.

Including another file in jQuery using $.getScript works since the script will not be cached by default. So we are safe to call other scripts. The calls can be arranged like this:

HTML

JavaScript

$(".choice").change(on_change);

var url = "https://example.com";
$.url1 = url + "/script1.js";
$.url2 = url + "/script2.js";

function on_change() {
  if ($(".choice").val()=="script1") {
    script1();
  } else {
    script2();
  }
}

// script1
function script1() {
  $.getScript($.url1, function( data, textStatus, jqxhr ) {
    // Execute here
  });
}

// script2
function script2() {
  $.getScript($.url2, function( data, textStatus, jqxhr ) {
    // Execute here
  });
}

user_1088058 · Answer

A little extension to the library from Dan Dascalescu's answer taken from the Facebook idea.

(function() {
var __ = {};
this._ = function(name, callback) {
    if(__[name]==undefined) {
        __[name] = true;
        var firstScript = document.getElementsByTagName('script')[0],
          js = document.createElement('script');
          js.src =  name;
          js.onload = callback;
          firstScript.parentNode.insertBefore(js, firstScript);
    }
}
})();

(new _('https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js', function() {
 snowStorm.snowColor = '#99ccff';
}));

user_5646198 · Answer

var xxx = require("../lib/your-library.js")

or

import xxx from "../lib/your-library.js" //get default export
import {specificPart} from '../lib/your-library.js' //get named export
import * as _name from '../lib/your-library.js'  //get full export to alias _name

user_5175935 · Answer

You can use my loadScript ES module for loading of the JavaScript files.

Usage:

In your head tag, include the following code:

or

Now you can use window.loadScript for loading of your JavaScript files.

loadScript.async( src, [options] )

Asynchronous load JavaScript file.

src: URL of an external script file or array of the script file names.

options: the following options are available

onload: function () The onload event occurs when a script has been loaded. Default is undefined.

onerror: function ( str, e ) The onerror event occurs when an error has been occurred. The default is undefined.

    str: error details

    e: event

appendTo: The node to which the new script will be append. The default is the head node.

For example

loadScript.async( "JavaScript.js",
        {
            onload: function () {

                var str = 'file has been loaded successfully';
                console.log( str );
            },
            onerror: function ( str, e ) {

                console.error( str );
            },
        } );

Example of usage

user_929999 · Answer

So this is a edge case. But if you need to load the JavaScript from a remote source, most modern browsers might block your cross-site requests due to CORS or something similar. So normal

Won't work. And doing the document.createElement('script').src = '...' won't cut it either. Instead, what you could do is load the JavaScript code as a resource via standard GET request, and do this:

By grabbing the content yourself, the browser won't notice malicious intents and allow you go do the request. Then you add it in

user_14639867 · Answer

Make a fetch request and eval the result.

user_7859952 · Answer

My general solution taken from the efekt.js.st library from EdgeS (which I authored).

shameless plug alert - I am on other stackexchange network sites. This is a relink of https://codereview.stackexchange.com/questions/263764/dynamic-load-css-or-script.

What code or design would you use to support dynamic-loading of css and scripts?

Requirements

support promise-await-async including error-handling
support load-once caching, including reloading
support load in head, body, or current script-element
support load css, js, mjs modules or other script-types
support other tag attrs, like nonce, crossorigin, etc

static loadScriptOrStyle(url, options) {
  // provenance :<# **Smallscript EdgeS efekt** `efekt.js.st` github libraries #>
  // returns    :
  // options    :<# `fIgnoreCache`, `fAppendToHead`, `fUrlIsStyle`, `attrs:{}` #>
  const head = document.head; let node = options?.fAppendToBody ? document.body : head;
  const url_loader_cache = document.head.url_loader_cache
    ? head.url_loader_cache
    : (head.url_loader_cache = {script:{},link:{}})
  const kind = (options?.fUrlIsStyle || /\.css(?:(?:\?|#).*)?$/i.test(url))
    ? 'link' : 'script';
  // check already-loaded cache
  if(url_loader_cache[kind][url]) {
    const el = url_loader_cache[kind][url];
    // support `fIgnoreCache` reload-option; should not use on `head`
    if(options?.fIgnoreCache)
      el.remove();
    else
      return(new CustomEvent('cache',{detail:el}));
  }
  // (re)create and record it
  const self = document.currentScript;
  const el = url_loader_cache[kind][url] = document.createElement(kind);
  const append = (!self || options?.fAppendToHead || options?.fAppendToBody)
    ? el => node.appendChild(el)
    : el => self.parentNode.insertBefore(el, self);
  const load = new Promise((resolve, reject) => {
    el.onload  = e => {e.detail = el;resolve(e)};
    el.onerror = e => {e.detail = el;reject(e)};
    // `onload` or `onerror` possibly alter `cache` value
    // throw(new URIError(`The ${url} didn't load correctly.`))
  });
  // configure `module` attr, as appropriate
  if(/\.mjs(?:(?:\?|#).*)?$/i.test(url))
    el.type = 'module'
  // configure other attrs as appropriate (referrer, nonce, etc)
  for(const key in options?.attrs) {el[key] = attrs[key]}
  // trigger it
  if(kind === 'link') el.rel = 'stylesheet', el.href = url; else el.src = url;
  append(el);
  return(load);
}

user_16711980 · Answer

So if you want it quick, and easy... Try this:

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}

user_16711980 · Answer

It’s this simple:

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

user_10177977 · Answer

I did not see an answer whereby you create an object of all functions and variables in a file and then make that object an argument to refer to it in another file.

E.g., you have files called 'jsMod.js', 'jsView' and 'jsContr.js':

File jsMod.js

JSMODOBJ = {};
JSMODOBJ.valueAddition = function(/* element value 1 */ val1, /* element value 2 */ val2) {
  return val1 + val2;
}

File jsView.js

JSVIEWOBJ = {};
JSVIEWOBJ.elementColour = function(/* element id to change colour */ id, /* css colour classname */ col) {
  document.getElementById(id).className = col;
}

File jsContr.js

JSCONTROBJ = {};
var jsMod = JSMODOBJ;
var jsView = JSVIEWOBJ;

JSCONTROBJ.changeColourByValue = function (val1, val2, id, clss) {
  if (jsMod.valueAddition(val1,val2) !== 0) {
    jsView.elementColour(id, clss);
  }
}

Then you can set the .js files dynamically by echoeing the scripts into your .html or .php file:


        
        ";
?>

Then just call the control function within a tag. Of course, this will take a lot of time in the beginning to set up, but it saves you time in the long run.

I use this in a slightly different way, but this way also works.

user_4934640 · Answer

You can also use gulp, gulp-concat, gulp-typescript with /// includes:


File packages.json
{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "@types/gulp": "^4.0.6",
    "@types/gulp-concat",
    "@types/gulp-typescript",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1",
    "gulp-typescript": "^6.0.0-alpha.1",
    "typescript": "^3.7.3"
  }
}

File src/someimport.ts
class SomeClass {
    delay: number;
}

File src/main.ts
/// 

someclass = new SomeClass();
someclass.delay = 1;

This main Gulp.js task (on gulpfile.js) targets only the src/main.js file, resolving all its ///  include references. These includes are know as Triple-Slash Directives, and they are used only for transpilers tools to combine files. In our case, they are used explicitly by .pipe(resolveDependencies({ and by TypeScript itself when checking the file for missing types, variables, etc.


Triple-Slash Directives
When do I need a triple slash reference?

Refer to gulp-typescript if you would like to customize the var tsProject = ts.createProject call and not use a tsconfig.json file or override its parameters.
File gulpfile.js
var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("main", function() {
  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
      pattern: /^\s*///\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"
]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(tsProject())
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

Pure javascript version
If you would like to target all your TypeScript project files instead of only src/main.ts, you can replace this:
  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
    ...
// -->
  return tsProject
    .src()
    .pipe(resolveDependencies({
    ...

If you do not want to use TypeScript, you can use this simplified gulpfile.js and remove all TypeScript includes from package.json:
File gulpfile.js
var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

gulp.task("main", function() {
  return gulp
    .src(["src/main.js"])
    .pipe(resolveDependencies({
      pattern: /^\s*///\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"
]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

File packages.json
{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1"
  }
}

Then, after running the command npm run gulp, the file build/main.js is created with the following as its contents:
File build/main.js
class SomeClass {
}
/// 
someclass = new SomeClass();
someclass.delay = 1;

Which allows me to include it in the browser with the script tag, after serving the build directory files:

    
        
    
    
        
    


Related questions:

TypeScript: Gulp
Can I use TypeScript without RequireJS?
Simple concatenation of main file that requires another JavaScript file using Gulp.js
Client on Node.js: Uncaught ReferenceError: require is not defined
How can TypeScript browser Node.js modules be compiled with Gulp.js?
Concatenate files using babel
How can I 'require' CommonJS modules in the browser?
Is there an alternative to Browserify?

user_11064188 · Answer

On the back-end, you can use CommonJS modules. For example:

//a.js
function func () {
   var result = "OK Bro";
   return result;
}

module.exports = { func };

//b.js
var a = require('./a.js');
console.log(a.func);

user_17389235 · Answer

You can just use the require(); tag.

For example, if I had a addition.js module that I wanted to add to math.js, I would do this:

//this is math.js

//vars
let a = 1;
let b = 3;

//start of code
const additionfile = require('addition.js');
window.alert("You added " + a + " and " + b + " together, to get " + additionfile.add(a,b) + "!");

if you wanted the addition.js file, it would look something like this

function add(a,b) {
   const sum = a + b;
   return sum;
}

user_9868445 · Answer

This is the easiest solution. Use a bundler like Vite.js and then simply do:

import "./path/to/js/file";

That's it! The OP has asked for something like "@import in CSS" and this is exactly like that. It is also not as rocket science complex as some of the old methods. It is at least undoubtedly the most beginner-friendly method, but I'm sure non-beginners do like it as well.

To get started with Vite for a vanilla JavaScript project, just have Node.js and [NPM3 installed, and then do:

npm create vite@latest  --template vanilla

E.g.:

npm create vite@latest my-js-app --template vanilla

Now add imports like mentioned at the beginning of this answer and call it a day.

Just as a side note: Also another thing that might pop into your mind is namespacing issues, e.g., what if a name you have used in a file you're including is similar to a name you already have in your current file? But that's the nature of JavaScript, right? It's not an issue specific to this method.

So you'll need to devise strategies for handling that separately. There's a comprehensive article on Addy Osmani's blog in case you want to learn more about that: Design Patterns for Handling the Global Namespace in JavaScript.

user_13571465 · Answer

You shall use this:

Easy!

How do I include a JavaScript file in another JavaScript file?

68 Answers

ES6 Modules

ECMAScript modules in browsers

Dynamic imports in browsers

Node.js require

AJAX Loading

Fetch Loading

jQuery Loading

Dynamic Script Loading

Detecting when the script has been executed

Source Code Merge/Preprocessing

ES6 Modules

ES6 Modules

CommonJS (used in Node.js)

Here is maybe another way!

refs

Import and export modules using ES6 that work with Node.js

Create files

main.js

lib.mjs

Run

Dynamically Loading Multiple Scripts In Order

Run dependent code after script loads

Handle loading errors

Shortcut Function

Usage:

loadScript.async( src, [options] )

File jsMod.js

File jsView.js

File jsContr.js

File packages.json

File src/someimport.ts

File src/main.ts

File gulpfile.js

Pure javascript version

File gulpfile.js

File packages.json

File build/main.js