Webpack ES6 模块多类应用程序组织

Question

我是第一次用 webpack 构建一个应用程序，我正在努力组织类文件。 我无法使代码正常工作。 我还是 ES6 的新手，所以我下面的代码可能非常错误，但我不确定它是我的方法/概念还是我的语法。

条目是index.js ，我也有这些文件

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主要的全局方法/变量类

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供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供guests方法

import App from './app.js';

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

src/js/cookie.js cookie 操作方法

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

src/js/database.js firebase 方法

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

Answer 1

您正在尝试静态访问实例属性。 在尝试访问cookieStore属性之前，您需要创建App类的实例。 您可以创建一个实例并将其导出到您的 app.js 中以获得单例实例。

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

在其他文件中

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

app.cookieStore.getData();