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方法是为了usersimport 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方法是为了guestsimport 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();