转换旧的应用程序以使用Webpack

Question

I'm trying to convert my application to use webpack as it's becoming a pain to manage all the dependencies. I've got the vendor files compiling OK.

I have the file below ( this is a big file but I've removed alot for simplicity ) and I want to import this in my entry points. Whatever I try I get App.init is not a function. How would I go about converting this into a module and still act like it is doing? eg App.someFunction()

var App = function() {

// IE mode
var isRTL = false;
var isIE8 = false;
var isIE9 = false;
var isIE10 = false;

var resizeHandlers = [];

var assetsPath = '/v1/assets/';

// theme layout color set

var brandColors = {
    'blue': '#89C4F4',
};

// initializes main settings
var handleInit = function() {
    //do stuff
};

// Handlesmaterial design checkboxes
var handleMaterialDesign = function() {
    //do stuff
}

// Handles custom checkboxes & radios using jQuery iCheck plugin
var handleiCheck = function() {
    //do stuff
};
//* END:CORE HANDLERS *//

return {

    //main function to initiate the theme
    init: function() {
        //IMPORTANT!!!: Do not modify the core handlers call order.

        //Core handlers
        handleInit(); // initialize core variables

        //UI Component handlers     
        handleMaterialDesign(); // handle material design  
    },

    //main function to initiate core javascript after ajax complete
    initAjax: function() {
        handleiCheck(); 
    },

    //init main components 
    initComponents: function() {
        this.initAjax();
    },
};

}();

jQuery(document).ready(function() {    
 App.init(); // init metronic core componets
});

Answer 1

Try converting App to a common.js module. Inside app.js :

exports.App = function() {
...
}

and then import it inside your index file:

var App = require('path/to/app.js');

jQuery(document).ready(function() {    
  App.init();
});