应用程序在捆绑后未定义

Question

我的代码是运行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 和指令都在那里。

Answer 1

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

我删除了我之前的评论，因为我认为回购应该回答你的问题。

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

使用browserify时，需要什么就require什么。

Answer 2

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

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

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

Answer 3

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

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

解决方法很简单，我只需要把

export default app;

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

导入它

import app from '../app';

进入我的directives/components等等

应用程序在捆绑后未定义

app is not defined after bundling

javascript

angularjs

gulp

browserify