SharePoint 2013 : Calling function in javascript file from Ribbon button

Question

I am trying to call a function in an external javascript file from SharePoint 2013 ribbon button. I have a Typescript file and i am using Webpack to transcompile it to javascript. When i try to call the function from browser console og SP2013 button, it is undefined. Has any body done it before.

Following are the files used in setup.

Typescript file :

import * as $ from 'jquery';
import * as pnp from 'sp-pnp-js';

export class HelperLibrary {

    public Bar() {
        return "This is a string";
    }
}

Webpack config file:

var path = require('path');
var webpack = require('webpack');

module.exports = {    
    entry: {
        app: ['./js/ts/HelperLibrary'
              ]
    },
    output: {        
        path: path.resolve(__dirname, './js/js'),
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            include: path.resolve(__dirname, './js/ts'),
            loader: 'ts-loader'
        }]
    },
    resolve: {
        extensions: [".webpack.js", ".ts", ".js"]
    }
};

Single javascript file.

/******/ (function (modules) { // webpackBootstrap
    /******/    // The module cache
    /******/    var installedModules = {};
    /******/
    /******/    // The require function
    /******/    function __webpack_require__(moduleId) {
        /******/
        /******/        // Check if module is in cache
        /******/        if (installedModules[moduleId]) {
            /******/            return installedModules[moduleId].exports;
            /******/
        }
        /******/        // Create a new module (and put it into the cache)
        /******/        var module = installedModules[moduleId] = {
            /******/            i: moduleId,
            /******/            l: false,
            /******/            exports: {}
            /******/
        };
        /******/
        /******/        // Execute the module function
        /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        /******/
        /******/        // Flag the module as loaded
        /******/        module.l = true;
        /******/
        /******/        // Return the exports of the module
        /******/        return module.exports;
        /******/
    }
    /******/
    /******/
    /******/    // expose the modules object (__webpack_modules__)
    /******/    __webpack_require__.m = modules;
    /******/
    /******/    // expose the module cache
    /******/    __webpack_require__.c = installedModules;
    /******/
    /******/    // define getter function for harmony exports
    /******/    __webpack_require__.d = function (exports, name, getter) {
        /******/        if (!__webpack_require__.o(exports, name)) {
            /******/            Object.defineProperty(exports, name, {
                /******/                configurable: false,
                /******/                enumerable: true,
                /******/                get: getter
                /******/
            });
            /******/
        }
        /******/
    };
    /******/
    /******/    // getDefaultExport function for compatibility with non-harmony modules
    /******/    __webpack_require__.n = function (module) {
        /******/        var getter = module && module.__esModule ?
        /******/            function getDefault() { return module['default']; } :
        /******/            function getModuleExports() { return module; };
        /******/        __webpack_require__.d(getter, 'a', getter);
        /******/        return getter;
        /******/
    };
    /******/
    /******/    // Object.prototype.hasOwnProperty.call
    /******/    __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    /******/
    /******/    // __webpack_public_path__
    /******/    __webpack_require__.p = "";
    /******/
    /******/    // Load entry module and return exports
    /******/    return __webpack_require__(__webpack_require__.s = 0);
    /******/
})
/************************************************************************/
/******/([
/* 0 */
/***/ (function (module, exports, __webpack_require__) {

    module.exports = __webpack_require__(1);


    /***/
}),
/* 1 */
/***/ (function (module, exports, __webpack_require__) {

    "use strict";

    Object.defineProperty(exports, "__esModule", { value: true });
    var HelperLibrary = (function () {
        function HelperLibrary() {
        }
        HelperLibrary.prototype.Bar = function () {
            return "This is a string";
        };
        return HelperLibrary;
    }());
    exports.HelperLibrary = HelperLibrary;


    /***/
})
/******/]);

Answer 1

Here is the workaround to make it happen.

import * as $ from 'jquery';
import pnp from 'sp-pnp-js';

declare global {
    interface Window {       
        ShowCustomDialog(): void;
    }
}

var showCustomDialog = function () {
    console.log("success");
}

window.ShowCustomDialog = showCustomDialog;