Webpack ES6 modules multiple class app organization

I’m building an app with webpack for the first time and i’m trying to wrap my head around organizing class files. I’m having trouble getting the code to work. I’m still new to ES6 and such, so my code below is probably very wrong but i’m not sure its my approach/concept or its my syntax.

entry is index.js and I also have these files

import App from './js/app.js';
import User from './js/user.js';
import Guest from './js/guest.js';

const app = new App();
const user = new User();
const guest = new Guest();

$(document).ready(function () {
    app.DatabaseStore.senddata();
    console.log( user.getall() );
});

src/js/app.js the main global method/variable class

import CookieStore from './cookie.js';
import DatabaseStore from './database.js';

export default class App {
    constructor() {
        this.cookieStore = new CookieStore();
        this.databaseStore = new DatabaseStore();
    }
    gettime() {
        return 'time';
    }
}

src/js/user.js methods that are for users

import App from './app.js';

export default class User extends App {
    constructor() {
        this.mydata = App.cookieStore.getData();
        console.log(this.mydata );
    }
    getall() {
        return ['foo', 'bar', 'baz'];
    }
}

src/js/guest.js methods that are for guests

import App from './app.js';

export default class Guest extends App {
    constructor() {
        this.mydata = App.cookieStore.getData();
    }
}

src/js/cookie.js cookie manipulating methods

export default class CookieStore {
    constructor() {}
    mydata() {return 'foo';}
}

src/js/database.js firebase methods

export default class DatabaseStore {
    constructor() {}
    senddata() {
        this.mydata = App.cookieStore.getData();
    }

Answer

You are trying to access instance property statically. You need to create an instance of App class before trying to access cookieStore property. You can create an instance and export it in your app.js to have singleton instance.

//in your app.js 
export const app = new  App();

in other files

import {app} from './js/app.js'

app.cookieStore.getData();

Advertisement

Answer