捆绑后未定义应用程序答案

【问题标题】：app is not defined after bundling捆绑后未定义应用程序
【发布时间】：2015-12-15 14:19:51
【问题描述】：

我在我的代码上运行browserify，如下：

import './app';

//——————————————————————————————————————————————————//
// Components
//——————————————————————————————————————————————————//

import './components/_ntToggleClass';

应用很简单

const app = angular.module('app', []);

components 中的文件是组件。但他们使用的是前面提到的app：

  app.directive('ntToggleClass', () => {
    ...    }

当我手动将所有内容放在一个文件中时，一切正常。但是在我使用 browserify 之后，我得到了

Uncaught ReferenceError: app is not defined

当我查看代码时，var app 和指令都在那里。

【问题讨论】：

这没有帮助，抱歉。
尝试使用require("./components/_ntToggleClass.js")，应该直接复制文件内容。
也不起作用，@ScottKaye
查看我更新的答案，我在其中发布了一个快速演示的链接，我将它们放在一起并发布在 github 上。 @ScottKaye 是正确的顺便说一句。

标签： javascript angularjs gulp browserify

【解决方案1】：

我在github 上制作了一个快速示例。这将为您提供一个运行 browserify 的工作存储库。

我已经删除了我以前的 cmets，因为我认为 repo 应该回答你的问题。

编辑：我想我刚刚得到了你的问题，你试图创建一个全局变量 app 以便在其他文件中使用？使用 browserify 时这是不可能的，文件中不是 required 的任何变量都将返回 undefined。

使用 browserify 时，只需要你需要的任何东西。

【讨论】：

【解决方案2】：

我的一个朋友来帮忙 ;-)

我正在使用 Babel（我认为这很明显，因为我使用 import 而不是 require）进行编码（准确地说是使用 es2015 进行 Babelify），所以，因为我有 import，我也需要export。

解决方法很简单，我要做的就是把

export default app;

在我的 app.js 文件的末尾，然后使用

导入它

import app from '../app';

进入我的指令/组件等

【讨论】：

我使用 require 而不是 import 并且面临同样的问题，我将两个控制器捆绑到一个文件中，并且在捆绑的第二个文件中它给应用程序未定义 @Tomek

【解决方案3】：

我认为这是关于定义排序。

const app = angular.module('app', []); 这部分应该是下面部分的顶部：

app.directive('ntToggleClass', () => {
    ...    }

【讨论】：

虽然这可行，但我宁愿避免在每个文件中写入const app...。