Typoskript erzeugt Javascript (minimierte durch schluck) Verlust seiner Handler, wenn es in einem anderen Javascript

Question

Hallo Aufruf habe ich eine sehr einfache Typoskript Modul

export module myFirstPackage { 
    export class test { 
     description : string 
     constructor() { 
      this.description = "This is a test module class"; 
     } 

     public getDescription() { 
      return this.description; 
     } 

    } 

    export function printDescription() : string { 
     alert(new test().getDescription); 
    } 
} 

ich JavaScript-Datei erzeugt und es uglified, ich versuche dann die uglified-Datei verwenden in einer anderen Javascript-Anwendung als Bibliothek, aber wie kann ich den Handler zu den ts Javascript generiert bekommen? Ich kann über meinen Modulnamen überhaupt nicht darauf zugreifen.

Ich bin uglifyingt es durch schluck

mein schluck Datei sieht wie folgt aus

var gulp = require("gulp"); 
var watchify = require("watchify"); 
var browserify = require("browserify"); 
var source = require('vinyl-source-stream'); 
var tsify = require("tsify"); 
var gutil = require("gulp-util"); 
var uglify = require('gulp-uglify'); 
var sourcemaps = require('gulp-sourcemaps'); 
var buffer = require('vinyl-buffer'); 
var sass = require('gulp-sass'); 
var minifyCss = require('gulp-minify-css'); 
var concat = require('gulp-concat'); 
var rename = require('gulp-rename'); 

//Variables 
var conf = { 
    html: ['src/html/**/*.html'], 
    scss: ['src/scss/**/*.scss'], 
    jsdistAll: 'src/js/', 
    jsdist: 'www/js/', 
    htmldist: 'www/templates/', 
    cssdist: 'www/css/', 
    jsfilename: 'all.js', 
    cssfilename: 'style.css', 
    tsentry: 'src/ts/main.ts', 
    debugts: true 
}; 
//TS code handling 
var watchedBrowserify = watchify(browserify({ 
    basedir: '.', 
    debug: conf.debugts, 
    entries: [conf.tsentry], 
    cache: {}, 
    packageCache: {} 
}).plugin(tsify)); 

function bundle() { 
    return watchedBrowserify 
     .bundle() 
     .pipe(source(conf.jsfilename)) 
     .pipe(gulp.dest(conf.jsdistAll)) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     .pipe(uglify()) 
     .pipe(rename({ extname: '.min.js' })) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest(conf.jsdist)); 
} 

watchedBrowserify.on("update", bundle); 
watchedBrowserify.on("log", gutil.log); 

//Html handling 
gulp.task("html", function() { 
    return gulp.src(conf.html) 
     .pipe(gulp.dest(conf.htmldist)); 
}); 

//Css handling 
gulp.task('sass', function() { 
    return gulp.src(conf.scss) 
     .pipe(sourcemaps.init()) 
     .pipe(sass({includePaths : ['_/'+conf.scss]}).on('error', sass.logError)) 
     .pipe(gulp.dest(conf.cssdist)) 
     .pipe(minifyCss({ 
      keepSpecialComments: 0 
     })) 
     .pipe(rename({ extname: '.min.css' })) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest(conf.cssdist)) 
}); 

//Watch task 
gulp.task('watch', function() { 
    gulp.watch(conf.html, ['html']); 
    gulp.watch(conf.sass, ['sass']); 
}); 

//initialize task 
gulp.task("default", ["html", "sass", "watch"], bundle); 

einem anderen Frage auf der Zeile Uhr für html funktioniert aber nicht für sass.

Answer 1

Dies hat nichts mit Verkleinerung zu tun, aber mit browserify Scoping Ihr Modul (wie es sein sollte). Sie müssen browserify anweisen, Ihr Modul und die require-Funktion explizit verfügbar zu machen.

in Ihre browserify Kette in Zug:

.require(fooFilename, { expose: "foo" }) 

... und in der anderen Hälfte des Projekts:

var foo = require("foo"); 
foo.fooExport; 

Standard-Verkleinerungs nie zugänglich Auswirkungen auf etwas haben sollte , Apropos.

Auf der anderen Seite Sie konnte einfach ES6 Module nicht verwenden, die passiert, wenn Sie die Top-Level-Export-Anweisung vor dem Namespace entfernen (Sie verwenden das alte Modul Schlüsselwort gibt, aber das ist eigentlich bekannt als Namensraum jetzt). In diesem Fall brauchen Sie nicht browserify, nur gulp-typescript oder etwas und concat Ihre Ausgabe.