app is not defined after bundling

I am running browserify on my code, it is as follows:

我在我的代码上运行browserify,它如下:

import './app';

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

import './components/_ntToggleClass';

app is simply

应用很简单

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

while files in components are, well, components. But they are using forementioned app:

虽然组件中的文件是组件。但是他们正在使用前面提到的app:

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

When I put everything in one file by hand, all worked. But after I used browserify on this, I am getting

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

Uncaught ReferenceError: app is not defined

未捕获的ReferenceError:未定义app

When I look inside the code, both var app and the directive are there.

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

3 个解决方案

#1

I've slapped together a quick sample on github. This will give you a working repository that runs browserify.

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

I've removed my previous comments, as I think the repo should answer your questions.

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

edit: I think I just now got your question, you were trying to create a global variable app to just be used in each other file? This is impossible when using browserify, any variable that isn't required in your file will be returning undefined.

编辑:我想我刚刚得到你的问题,你试图创建一个全局变量应用程序只是在每个其他文件中使用?使用browserify时,这是不可能的,文件中不需要的任何变量都将返回undefined。

When using browserify, just require whatever you need.

使用browserify时,只需要您需要的任何内容。

#2

A friend of mine came with help ;-)

我的一个朋友带来了帮助;-)

I am using Babel (I thought thas was obvious, since I used import not require) for my coding (Babelify with es2015, to be precise), so, as I have import, I need export too.

我正在使用Babel(我认为很明显,因为我使用import不需要)用于我的编码(确切地说是使用es2015进行Babelify),所以,因为我有导入,所以我也需要导出。

Solution is very simple, all I had to do is to put

解决方案很简单,我所要做的就是放

export default app;

at the end of my app.js file and then import it using

在我的app.js文件的末尾,然后使用导入它

import app from '../app';

into my directives/components etc.

进入我的指令/组件等

#3

I think it's about definition ordering.

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

const app = angular.module('app', []); This part should be top of below part:

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

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

#1