Gulp + Browserify + dactylographiée au navigateur

Question

Mon problème est le suivant:

J'utilise gulp + browserify pour compiler mon tapuscrit JavaScript que vous pouvez utiliser sur des pages HTML normales, le problème est que ma classe est jamais disponible sur le navigateur:

VM633:1 Uncaught ReferenceError: Test is not defined 
    at <anonymous>:1:13 

Ceci est mon fichier dactylographiée:

class Test { 
 
     public test(): void { 
 
      console.log("aa"); 
 
     } 
 
}

Ceci est mon gulpfile

var gulp = require("gulp"); 
 
var browserify = require("browserify"); 
 
var source = require('vinyl-source-stream'); 
 
var tsify = require("tsify"); 
 

 
gulp.task("default", function() { 
 
    return browserify({ 
 
     //basedir: '.', 
 
     debug: true, 
 
     entries: ['app/Resources/typescript/Test.ts'], 
 
     cache: {}, 
 
     packageCache: {} 
 
    }) 
 
     .plugin(tsify) 
 
     .bundle() 
 
     .pipe(source('bundle.js')) 
 
     .pipe(gulp.dest("web/bundles/framework/js")); 
 
});

Le fichier compile sans problème, et est inclus dans mon index.html (le fichier js compilé).

Mais quand je tente:

var t = new Test();

Je reçois l'erreur suivante:

VM633:1 Uncaught ReferenceError: Test is not defined 
    at <anonymous>:1:13 

Je ne peux pas le résoudre, j'ai lu un havre de beaucoup et je Je n'ai rien trouvé de clair, j'ai tout essayé et rien n'a fonctionné.

Answer 1

Il y a quelques choses qui manquent ici:

Si vous voulez que votre classe soit accessible à l'extérieur de votre module, vous devez export il:

export class Test { 
    // ... 
} 

Browserify crée des fonctions au-dessus des classes vous définissez. Donc, il ne sera pas accessible globalement (ce qui est une bonne chose). Normalement, vous l'importer dans un autre fichier et de l'utiliser:

// in any TS file that wants to use `Test` class. Make sure this is included in the gulp entries as well 
import {Test} from "test"; 
var t = new Test(); 
console.log(t); 

Ou si je veux vraiment qu'il soit accessible dans le monde, vous pouvez le joindre à window objet:

// Dans le fichier Test.ts:

(window as any).Test = Test; // This can be useful when debuging. But don't do this in production code.