How to include js file inside another js file?

[prathikpisplunk]

I want to include xyz.js inside abc.js and refer this abc.js in my xml/html file.

basically I want to order the js files. First I want xyz.js and then abc.js to be loaded.

Let me know your inputs

[VatsalJagani]

You can provide a direct path like this if you don't want to mess around require.config.

../app/<my_app>/myCustomUtils

https://community.splunk.com/t5/Dashboards-Visualizations/How-to-include-Javascript-file-from-other-... 

[rjthibod]

In Splunk, the general recommendation for loading JS files, especially with dependencies, is to use the RequireJS framework (http://requirejs.org/). RequireJS provideds you a way of defining and controlling the loading of resources. Here is a link about using RequireJS in Splunk: http://dev.splunk.com/view/webframework-developapps/SP-CAAAESY

You can also define and load JS modules using CommonJS syntax within Splunk dashboards, but RequireJS is probably considered the preferred method.

If you are using RequireJS, you need to add a little bit of extra code to the top of your JS files that will tell RequireJS what dependencies your code has, and in what order those dependencies should be loaded.

For example, here is what is at the top of many of my JS files that perform the primary functions for a dashboard. The use of require tells RequieJS that this code block is just a bunch of code to run, not a module/class definition. This definition lists all the things that this code block requires, namely the underscore and jquery library, my custom appUtils module, and some Splunk modules.

  require([
    "underscore",
    "jquery",
    "splunkjs/mvc",
    "appUtils",
    "splunkjs/ready!",
    "splunkjs/mvc/simplexml/ready!",
  ], function(_, $, mvc, appUtils) {
    ... do stuff 
  });

Then in my code for "appUtils", I use define instead of require at the top of the code block to tell RequireJS that this is JS module, i.e., reusable code.

  define([
    "jquery",
    "underscore",
    "appOptions",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!",
  ], function($, _, appOptions, mvc) {
   ...
      return appUtils = (function() {
      ...
      return appUtils;
    })();
  });

The other key piece for RequireJS is to tell it the paths on where to find my custom JS files in my app. This is done in my top-level JS file that loads first for all of my app (i.e., dashboard.js). You could put this elsewhere like the JS file for your dashboard. Regardless, you should define these paths in the primary starting point for your JS code.

  // setup paths for rest of the configuration
  requireRoot = "../app";
  appPath     = requireRoot + "/" + myAppName;

  // configure RequrieJS Paths and Options
  require.config({
    paths: {
      "app"                : requireRoot,
      "appOptions"         : appPath + "/components/lib/options",
      "appUtils"           : appPath + "/components/lib/utils",
      ...
    }
  });

[lucacaldiero]

thanks for your example, but I am facing some difficulties in importing a little complex js file that expose some functions.

The complete code is here

This is the beginning of the js file: 

!function(t, e) {
    "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define("cronstrue", [], e) : "object" == typeof exports ? exports.cronstrue = e() : t.cronstrue = e()
}(globalThis, (function() {
    return (()=>{
        "use strict";
        var t = {
            794: (t,e,n)=>{
                Object.defineProperty(e, "__esModule", {
                    value: !0
                }),
                e.CronParser = void 0
[...]

The end of the code is this:

         , e = {};
        function n(r) {
            var o = e[r];
            if (void 0 !== o)
                return o.exports;
            var i = e[r] = {
                exports: {}
            };
            return t[r](i, i.exports, n),
            i.exports
        }
        var r = {};
        return (()=>{
            var t = r;
            Object.defineProperty(t, "__esModule", {
                value: !0
            }),
            t.toString = void 0;
            var e = n(728)
              , o = n(336);
            e.ExpressionDescriptor.initialize(new o.enLocaleLoader),
            t.default = e.ExpressionDescriptor;
            var i = e.ExpressionDescriptor.toString;
            t.toString = i
        }
        )(),
 r
);
})();
});

How can I import this, please?

Thanks a lot in advance.

Luca Caldiero

[abramble]

This is a REALLY helpful explanation. Reading your last stanza - I expected that myAppName might in fact be a variable that splunk defines - but this does not seem to be the case. Thanks for the tip about require.config