How to expose functions globally through webpack in a web app?

Question

I am trying to expose some functions which I have in my helpers.js file globally, so that I can directly call them without having to import them. Here is my javascript file:

function icon_string(num, white){
    return "https://flyhomes.imgix.net/icons/icons_" + (white ? "w" : "b") +"_v2-" + num.toString() + ".svg";
}

Number.prototype.format = function(decPlaces, thouSeparator, decSeparator) {
    var n = this,
        decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
        decSeparator = decSeparator == undefined ? "." : decSeparator,
        thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
        sign = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
};

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

Array.prototype.move = function (old_index, new_index) {
  if (new_index >= this.length) {
      var k = new_index - this.length;
      while ((k--) + 1) {
          this.push(undefined);
      }
  }
  this.splice(new_index, 0, this.splice(old_index, 1)[0]);
  return this; // for testing purposes
};

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        for (var i= pars.length; i-- > 0;) {    
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }
        url= urlparts[0]+'?'+pars.join('&');
        return url;
    } else {
        return url;
    }
}

function paramsToObject(params){
    var query_string = {};
    var query = params;
    var vars = query.split("&");
    for (var i=0;i



Sorry for adding the whole file, but I would like to draw attention to some of the functions which are applied to base classes themselves (such as Number, String etc), while others are declared as is.

To expose them, I tried adding alias in webpack.config.js as follows:

module.exports = {
  ...
  resolve: {
    extensions: ['.json', '.jsx', '.js'],
    alias: {
      'helpers': path.resolve(__dirname, './vendor/assets/javascripts/helpers.js')
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      helpers: 'helpers'
    })
  ],
  ...
};


But as I was skeptical, it didn't work. I copied this idea from the instance when we need a specific library globally and we have it's javascript file, we follow the above approach. But obviously, that's related to importing a specific file and not a file containing such functions and exporting them globally at once. Can you help me how to do it through webpack or where am I going wrong?

How to expose functions globally through webpack in a web app?

Answers (1)

Related Questions