0

我有很好的用于 javascript 的 gulp browserify 工作流程，现在还有 typescript。它们将源文件与模块组合在一起，并生成一个 .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 文件的情况相同。

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

注意： tsx 已编译，至少它在构建错误时失败，它只是没有放入包中。

4

1 回答 1

1

对不起，但上面的代码实际上是有效的。我错过了 tsx 文件中的正确导出，并且 browserify/tsify 一定发现没有任何有用的输出。

无论如何，这个设置真的很酷。它使继续构建 javascript 项目变得非常容易 - 使用 typescript 的力量。

于 2016-05-11T07:32:01.950 回答