浏览器化 + 打字稿

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。在 someclass.ts 我写了一些类：

class SomeClass {
    // bla-bla-bla
}

export = SomeClass;

我想在 main.ts 中使用这个类。我用 browserify 试试这个：

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

gulp 构建工作正常，但在浏览器控制台中我看到

node_modules\browserify\node_modules\browser-pack_prelude.js:1未捕获 错误：找不到模块“./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
});

我有第二个任务，它向 Browserify 指示应用程序 JS 入口点 (main.js)，然后它将生成捆绑文件，对其进行 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获得