Include JS from JS without Node.js

Question

I have tried

http://chapter31.com/2006/12/07/including-js-files-from-within-js-files/

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

https://github.com/volojs/create-template/blob/master/www/lib/require.js

where I want to create something like this

function include(file) {
    var script = document.createElement ("script");
    script.src = file;
    script.type = "text/javascript";
    script.defer = true;
    script.async = false;

    var head = document.getElementsByTagName("head");
    head.item(0).appendChild(script);
}

// Include some JS
include("../grains/vect3.js");
include("../grains/particle.js");
include("../grains/sphere.js");
include("../grains/grid4.js");
include("../grains/field.js");
include("../grains/force.js");
include("../grains/point2.js");
include("../color/rgb.js");
include("../canvas/graphics.js");
include("../data/dataxy.js");
include("../canvas/transform.js");
include("../canvas/xychart.js");
include("../test/test.js");
include("../canvas/chart2.js");
include("../canvas/xyseries.js");

But it does not work since some of the scripts depend on the others.

The idea is to have in the head something like

<script>
require(
    [
    "https://raw.githack.com/dudung/butiran/master/grains/particle.js",
    "https://raw.githack.com/dudung/butiran/master/grains/vect3.js",
    ],
    butiranTest
    );
</script>

and in the body

<script>
butiranTest();

function butiranTest() {
    var p = new Particle();
    console.log(p);
}
</script>

where class Particle depends on class Vect3.

Finally, it solved

// Set base url
var baseurl = "https://rawgit.com/dudung/butiran/master/";

// Set to false when not download whole scripts
var local = true;
if(local) {
    baseurl = "";
}

// Define libraries of butiran.js
var libs = [
baseurl + "chart/chart2.js",
baseurl + "chart/xyseries.js",
baseurl + "color/rgb.js",
baseurl + "demo/demo.js",
baseurl + "demo/exam.js",
baseurl + "demo/mjlaplaceplate.js",
baseurl + "framework/generator.js",
baseurl + "framework/industry.js",
baseurl + "framework/resource.js",
baseurl + "grains/grid4.js",
baseurl + "grains/particle.js",
baseurl + "grains/sphere.js",
baseurl + "grains/vect3.js",
baseurl + "math/integration.js",
baseurl + "math/polynomial.js",
baseurl + "math/random.js",
baseurl + "mathjax/update.js",
baseurl + "timer/timer.js",
baseurl + "visual/electronics/capacitors.js",
baseurl + "visual/electronics/connectors.js",
baseurl + "visual/electronics/point.js",
baseurl + "visual/coordinates.js",
baseurl + "visual/painter.js",
baseurl + "z/test_capacitors.js",
baseurl + "z/test_demo.js",
baseurl + "z/test_generator.js",
baseurl + "z/test_generator_chart2.js",
baseurl + "z/test_integration.js",
baseurl + "z/test_random.js",
baseurl + "z/test_timer.js",
];
require(libs, main);

// Define main script using butiran.js
function main() {
    var eout = document.createElement("div");
    eout.id = "scriptResult";
    document.body.appendChild(eout);

    examThreeGrains();
 }

Variable local is set to true while developing without internet connection.

score 0 · Accepted Answer · answered Mar 11 '18 at 17:08

0

With require.js it is very easy. Let's assume you have some script /some/script.js which has dependency on /some/script2.js and, for instance, jquery. Your require.js code inside /some/script.js will look something like this:

require(['/path/to/jquery.js', '/some/script2.js'], function () {
    // Callback function which executes after the dependencies are resolved
});

You can implement multiple require calls depending upon which dependency you need and when. Also require js knows that if a dependency is already resolved, it will not try to fetch the file from server and resolve again.

answered Mar 11 '18 at 17:08

Sachin Singh

898
1
8
17

Thank you, @sachin-singh, but I would like to have in the head something like require( [ "https://raw.githack.com/dudung/butiran/master/grains/particle.js", "https://raw.githack.com/dudung/butiran/master/grains/vect3.js", ], butiranTest ); and in body butiranTest(); function butiranTest() { //var a = new Vect3(1, 2, 3); //console.log(a); var p = new Particle(); console.log(p); } which does not work. – dudung Mar 11 '18 at 21:42
You are trying to fetch scripts from external URL. Make sure you start the URLs with //. Also particle.js and vect3.js can resolve in any order. If that's not an issue, then it should work. – Sachin Singh Mar 12 '18 at 07:26

Include JS from JS without Node.js

1 Answers1