Question

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

然而，有了一个较旧的javascript项目，我现在想要使用typescript引入新功能 - 而不是将所有内容转换为打字稿。

理想情况下，我希望browserify检测并预编译ts和tsx，并在浏览之前将结果与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-part，但我的typescript文件未捆绑。 是否可以以这种方式将打字稿文件添加到现有的javascript项目中？

注意：我暂时添加了一个React tsx文件，但是假设普通ts文件的情况相同。

注意：我试图手动将tsx文件“添加（）”到browserify包中，没有任何期望或结果。

注意：tsx是编译的，至少它没有构建错误，它只是没有放入包中。

Answer 1

很抱歉，但上面的代码确实有效。我错过了tsx文件中正确的 exports ，而且browserify / tsify必须发现输出没什么用。

无论如何，这种设置很有用。它使得在javascript项目上继续构建变得非常容易 - 使用打字稿的强度。

在浏览器中混合使用javascript和typescript

1 个答案: