Browserify + TypeScript

Question

美好的一天每個人。

我嘗試用Gulp構建我的Web項目。我希望使用TypeScript，並且我想通過browserify來判斷依賴關係。

但我有一些麻煩。

我用下面的代碼進行編譯：

var path = { 
    build: { 
     js: 'build/js/', 
    }, 

    src: { 
     ts: './src/ts/*.ts', 
    }, 

}; 

gulp.task("ts:build", function(){ 
    glob(path.src.ts, {}, function(err, files){ 
     var b = browserify({ 
      cache: {}, 
      packageCache: {}, 
      debug: true 
     }); 

     _.forEach(files, function(file){ 
      b.add(file); 
     }); 

     b.plugin('tsify', { noImplicitAny: true }) 
      .bundle() 
      .pipe(source('app.js')) 
      .pipe(gulp.dest(path.build.js)) 
     });  
    }); 
}); 

我不明白如何，我必須聲明依賴。例如，我有兩個* .ts文件：main.ts和someclass.ts。在某些類中，我寫了一些類：

class SomeClass { 
    // bla-bla-bla 
} 

export = SomeClass; 

我想在main.ts中使用這個類。我嘗試這與browserify：

var settingsPanel = require("./someclass"); 

一飲而盡建立正確的工作，但在瀏覽器控制檯我看

node_modules\browserify\node_modules\browser-pack_prelude.js:1Uncaught Error: Cannot find module './someclass';

我將是非常有益的關於此的任何意見。尤其是對於使用gulp + browserify + typescript的代碼示例的鏈接。

Answer 1

我只是在做一個非常類似的構建。

在我的構建中，我有一個使用commonjs模塊從TS到JS的編譯任務。在你gulpfile.js，當您編譯TS爲JS，你需要告訴編譯器使用commonjs模塊：

var tsProject = ts.createProject({ 
    removeComments : true, 
    noImplicitAny : true, 
    target : 'ES3', 
    module : 'commonjs', // !IMPORTANT 
    declarationFiles : true 
}); 

我有這表明該應用JS入口點（main.js）第二任務Browserify，它會然後生成包文件，uglify它並生成源地圖。

我main.ts文件中包含如下因素：

///<reference path="./references.d.ts" /> 

import headerView = require('./header_view'); 
import footerView = require('./footer_view'); 
import loadingView = require('./loading_view'); 

headerView.render({}); 
footerView.render({}); 
loadingView.render({}); 

我gulpfile.js看起來像這樣（請注意我這裏只是複製了相關部分）

// .... 

var paths = { 
    ts : './source/ts/**/**.ts', 
    jsDest : './temp/js/', 
    dtsDest : './temp/definitions/', 
    scss : './source/scss/**/**.scss', 
    scssDest : './temp/css/', 
    jsEntryPoint : './temp/js/main.js', 
    bowerComponents : './bower_components', 
    nodeModules : 'node_modules', 
    temp : './temp', 
    dist : './dist/' 
}; 

var tsProject = ts.createProject({ 
    removeComments : true, 
    noImplicitAny : true, 
    target : 'ES3', 
    module : 'commonjs', 
    declarationFiles : true 
}); 

// Build typescript 

gulp.task('tsc', function(){ 
    var tsResult = gulp.src(paths.ts).pipe(ts(tsProject)); 
    tsResult.dts.pipe(gulp.dest(paths.dtsDest)); 
    tsResult.js.pipe(gulp.dest(paths.jsDest)); 
}); 

// Browserify, uglify and sourcemaps 

gulp.task('minify-js', function() { 
    // transform regular node stream to gulp (buffered vinyl) stream 
    var browserified = transform(function(filename) { 
    var b = browserify({ entries: filename, debug: true }); 
    return b.bundle(); 
    }); 

    return gulp.src(paths.jsEntryPoint) 
    .pipe(browserified) 
    .pipe(sourcemaps.init({ loadMaps: true })) 
    .pipe(uglify()) 
    .pipe(sourcemaps.write('./')) 
    .pipe(gulp.dest(paths.dist)); 
}); 

// .... 

完整的源代碼（工作正在進行中）可在https://github.com/remojansen/modern-workflow-demo