在 gulp browserify 中混合 javascript 和打字稿

Question

我有很好的 gulp browserify 工作流程 javascript 和现在的打字稿。这些将源文件与模块组合在一起，并生成一个 .js 文件以供在浏览器中使用。

但是，由于有一个较旧的 javascript 项目，我现在想使用 typescript 引入新功能 - 无需将所有内容都转换为 typescript。

理想情况下，我希望 browserify 检测并预编译 ts 和 tsx，并在 browserifying 之前将结果与 js 文件一起传递给 babel：

function compileBrowserify(file, folder, watch, typescript) {
    // cache and packageCache is required for watchify to perform, debug produces sourcemaps. })
    var bundlerRaw = browserify(file, { debug: true, cache: {}, packageCache: {}}) 
    var bundler = watch ? watchify(bundlerRaw) : bundlerRaw

    bundler = typescript ? bundler.plugin(tsify, { noImplicitAny: false,  jsx: 'react', moduleResolution: 'node', target: 'ES6'}) : bundler
    bundler.transform(babelify.configure({
        presets: ['react', 'es2015', 'stage-0'],
        }))

    var rebundle = function() {
        return bundler
            .bundle()
            .on('error', function(err) { console.error(err.toString()); this.emit('end'); })
            .on('end', function() { console.log('Done browserifying'); })
            .pipe(source("app/main.js"))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(folder));
    }
    bundler.on('update', rebundle)
    return rebundle()
}

此设置实际上编译并适用于 js 部分，但我的打字稿文件未捆绑。 是否可以通过这种方式将打字稿文件添加到现有的 javascript 项目中？

注意：我目前正在添加一个 React tsx 文件，但假设常规 ts 文件的情况相同。

注意：我曾尝试手动 "add()" 将 tsx 文件添加到 browserify 包中，但没有寄予厚望或结果。

注意：tsx 已编译，至少它因错误而无法构建，只是没有放入包中。

Answer 1

抱歉，上面的代码确实有效。我从 tsx 文件中丢失了正确的 exports，browserify/tsify 一定发现没有任何有用的输出。

无论如何，这个设置能正常工作真是太棒了。它使继续构建 javascript 项目变得非常容易 - 使用打字稿的力量。

在 gulp browserify 中混合 javascript 和打字稿

Mixing javascript and typescript in gulp browserify

typescript

browserify

tsify