CODEWITHSUNDEEP
javascriptwebpack
Touhami
Touhami

Reputation: 809

webpack expose object as global

I have a coffeeScript file 'app.coffee' 

root = exports ? this

class DefipsyApplication extends Marionette.Application
  user_is_superuser: () ->
    app_config.is_superuser

app = new DefipsyApplication

app.addRegions {
  modalRegion: '#modal-region'
}

unless root.App
  root.App = app

I want to expose the App function in the browser

so here is my webpack config

module.exports = {
    entry: {
        app: './coffee/app.coffee',
    },
    output: {
        path: './build/',
        filename: '[name].bundle.js',
        libraryTarget: "var",
        library: ["MyProject", "[name]"],
    },
    module: {
        loaders: [
            { test: './coffee/app.coffee', loaders: ['expose?App', 'coffee'] },
        ]
    },
};

SO whene I test in browser I found that webpack was exposed my object to the browser, but this object is englobed by an other Object

so to call my method I should do

App.App

I Want to expose my function without this global var I need to access directely with 

App

here is a scree to show the object structur

enter image description here

Upvotes: 0

Views: 1209

Answers (1)

Matthias Sommer
Matthias Sommer

Reputation: 1088

In general, to expose Global Variables, Methods, and Modules in JavaScript, you can use several methods.

  1. You could add it manually to the browser's window object by 

    window.app = app

    or build a new object by

    window.app = { func1, func2,...}

  2. The expose-loader is an addon to Webpack, which adds modules to the global object. If you are using yarn for dependency management, you can install the expose-loader package via

    yarn add expose-loader --dev

    Alternatively, you can use the npm installer (Node Package Manager) via

    npm i expose-loader --save

    You can expose any function with

    require("expose-loader?package!functionName");

If you need more information, have a look at my post here

Upvotes: 1

Related Questions