如何使用 Webpack 引导应用程序答案

【问题标题】：How to bootstrap application with Webpack如何使用 Webpack 引导应用程序
【发布时间】：2016-06-30 16:53:10
【问题描述】：

我正在努力将我的 Marionette 应用从 requirejs 切换到 Webpack，在遇到很多问题后，我几乎完成了，但有一件事我无法弄清楚：如何引导我的应用。

使用 requirejs，我刚刚声明了一个全局变量 var app;，我在其中存储了我的主要 Marionette.Application 对象，以便我可以从其他文件中访问它。

但是，Webpack 将 this 从 window 更改为当前模块，所以我的 var app; 突然不再是全局的了。

我尝试将它们全部分配给window:window.app;，但我仍然无法从其他模块访问它们。

我的最后一次尝试是使用ProvidePlugin，但我在除第一个文件之外的所有文件中都得到了空对象，因此我将其删除。

我当前的代码是：

bootstrap.js（webpack.config.js 中的主要入口点）：从“apps/main”导入应用程序；

// Start history when our window.app.ication is ready
app.listenTo(app, 'start', function() {
    var that = this;
    $.when(
        this.auth.checkAuth()
    ).always(function(){
        that.router.start();
    });
});

app.start();

apps/main.js：

import Router from "routers/mainRouter";

module.exports = new Marionette.Application({ 
    initialize: function(){
      this.router = new Router();
    }   
});

路由器/mainRouter.js：

import App from "apps/main";

module.exports = Marionette.AppRouter.extend({
    start: function(){    
        App.something();
    },
});

在mainRouter 我得到：can't do something() on undefined。

有什么想法吗？

【问题讨论】：

标签： webpack marionette

【解决方案1】：

你有循环依赖 - apps/main.js 导入 router/mainRouter.js，但 router/mainRouter.js 也导入 apps/main.js。 Webpack 必须选择首先解析哪一个，因此在执行路由器代码时 App 是未定义的。

您需要重组您的代码，以便不再存在循环依赖 - 最简单的解决方案是将您的路由器代码移动到 apps/main.js。也就是说，我个人不与 Marionette 合作，所以可能有更优雅的方法来解决这个我不知道的问题。

【讨论】：

我认为 Webpack 的全部意义在于，由于它编译代码，它可以通过循环依赖变得智能。如果不是，它会消除他的很多用处。无论如何，这就是我询问全局变量的原因，如果我可以使我的“app”对象成为全局对象，那么我不需要在路由器中导入它，因为我已经可以访问它了。但看起来没有办法模拟一个简单的全局变量。

【解决方案2】：

看看你是否可以暂时隔离你的导入，然后浏览 webpack 构建的文件。你应该能够做到这一点。有一件事我不能 100% 确定查看这段代码。您正在使用 ES6 导入和 commonjs 模块导出。我想你想要export default new Marionette.Application({ ... });

【讨论】：