0

私は、javascript と今は typescript のための素敵な gulp browserify ワークフローを持っています。これらは、ソース ファイルをモジュールと結合し、ブラウザーで使用する単一の .js ファイルを生成します。

ただし、古い javascript プロジェクトがあるため、すべてを typescript に変換することなく、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 部分で機能しますが、私の typescript ファイルはバンドルされていません。 この方法で typescript ファイルを既存の javascript プロジェクトに追加することは可能ですか?

注: 現時点では React tsx ファイルを追加していますが、通常の ts ファイルの場合も同様であると想定しています。

注: 私は手動で tsx ファイルを browserify バンドルに "add()" しようとしましたが、高い期待や結果はありませんでした。

注: tsx はコンパイルされますが、少なくともエラーでビルドに失敗します。バンドルには含まれていません。

4

1 に答える 1

1

申し訳ありませんが、上記のコードは実際に機能しています。tsx ファイルからの正しいエクスポートが欠落しており、browserify/tsify は出力に役立つものが何もないことを発見したに違いありません。

とにかく、この設定が機能するのは本当にクールです。typescript の強みを利用して、javascript プロジェクトでの構築を継続することが非常に簡単になります。

于 2016-05-11T07:32:01.950 に答える