2016-07-31 52 views
0

嗨調用它時生成的JavaScript(通過一口精縮)損失其處理程序我有一個非常簡單的打字稿模塊打字稿在另一個JavaScript

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); 
    } 
} 

我生成的JavaScript文件,變醜了,我嘗試過用變醜文件在另一個JavaScript應用程序庫中,但我怎樣才能得到處理程序的TS生成的JavaScript?我無法通過我的模塊名稱訪問它。

我uglifyingt它通過一飲而盡

我一飲而盡文件看起來像該行以下

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); 

另一個問題是表適用於HTML,但不頂嘴。

+0

Ofcourse我總是可以通過顯式連接模塊手動將模塊導出到窗口對象,但我雖然不需要那樣做。 – user2412555

回答

0

這與縮小無關,但與browserify確定模塊的範圍(應該是這樣)。你需要告訴browserify明確暴露你的模塊和require函數。

添加到您的browserify鏈一飲而盡:

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

...在你的項目的另一半:

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

標準微小不應該有作用,對什麼訪問, 順便一提。

在另一方面你可以簡單地不能使用ES6模塊,當你刪除的命名空間的前頂部水平導出語句這恰好(您正在使用的舊模塊關鍵字有,但這實際上現在稱爲命名空間)。在這種情況下,您不需要browserify,只需要gulp-typescript或其他東西並且將您的輸出連接起來。

+0

我認爲這裏的問題是我嘗試在無節點應用程序中調用它,在離子前端中,我需要該模塊在全球範圍內暴露而不需要任何需求。 – user2412555

+0

然後刪除myFirstPackage之前的頂級導出,並且不要使用browserify,它唯一的目的是將類似節點的模塊捆綁在瀏覽器內使用。 – sgrtho