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.jscookie 操作方法

export default class CookieStore {

    constructor() {}

    mydata() {return 'foo';}

}

src/js/database.js火力基地方法

export default class DatabaseStore {

    constructor() {}

    senddata() {

        this.mydata = App.cookieStore.getData();

    }

Answer 1

您正在尝试静态访问实例属性。App在尝试访问属性之前，您需要创建类的实例cookieStore。您可以创建一个实例并将其导出到 app.js 中以获得单例实例。//in your app.js export const app = new  App();在其他文件中import {app} from './js/app.js'app.cookieStore.getData();