Webpack ES6 模块多个 class 应用组织

Question

我是第一次使用 webpack 构建应用程序，我正在努力组织 class 文件。我无法让代码正常工作。我对 ES6 等仍然是新手，所以我下面的代码可能非常错误，但我不确定它是我的 approach/concept 还是我的语法。

条目是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主全局method/variableclass

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 class 的实例。您可以创建一个实例并将其导出到您的 app.js 中以获得单例实例。

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

在其他文件中

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

app.cookieStore.getData();

Webpack ES6 模块多个 class 应用组织

Webpack ES6 modules multiple class app organization

javascript

class

webpack

es6-class

es6-modules