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