app non è definito dopo bundling

Question

Sono in esecuzione browserify sul mio codice, è la seguente:

import './app'; 

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

import './components/_ntToggleClass'; 

app è semplicemente

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

mentre i file in components sono, beh, componenti. Ma stanno utilizzando suindicato app:

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

Quando ho messo tutto in un unico file a mano, tutto ha funzionato. Ma dopo che ho usato browserify su questo, io sono sempre

Uncaught ReferenceError: app is not defined

Quando guardo all'interno del codice, sia var app e la direttiva sono lì.

Answer 1

Un mio amico è venuto con l'aiuto ;-)

Sto usando Babel (ho pensato thas era evidente, dal momento che ho usato import non require) per la mia codifica (Babelify con es2015, per la precisione), quindi, come ho import, ho bisogno anche di export.

soluzione è molto semplice, tutto quello che dovevo fare è mettere

export default app; 

alla fine del mio file app.js e quindi importarlo utilizzando

import app from '../app'; 

nelle mie direttive/componenti etc.

Answer 2

Ho schiaffeggiato un campione veloce su github. Questo ti darà un repository funzionante che esegue browserify.

Ho rimosso i miei commenti precedenti, poiché penso che il repository dovrebbe rispondere alle vostre domande.

modifica: Penso che ora ho appena ottenuto la tua domanda, stavi cercando di creare una variabile globale app da utilizzare solo in ogni altro file? Questo è impossibile quando si utilizza browserify, qualsiasi variabile che non sia required nel file restituirà undefined.

Quando si utilizza browserify, basta richiedere tutto ciò di cui si ha bisogno.

Answer 3

Penso che riguardi l'ordinamento delle definizioni.

const app = angular.module('app', []); Questa parte dovrebbe essere in cima alla sottostante parte:

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