2016-05-11 12 views
0

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

しかし、以前のjavascriptプロジェクトでは、すべてをtypescriptに変換せずに、typescriptを使用して新しい機能を導入したかったのです。

理想的には私が検出するbrowserify、プリコンパイルTSとTSX、そしてbrowserifying前バベルするJS-ファイルと一緒に結果を渡したい:

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プロジェクトにtypescriptファイルを追加することは可能ですか?

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

注:tsxファイルをブラウザのバンドルに手作業で追加()しようとしましたが、何の期待も結果もありませんでした。

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

答えて

1

申し訳ありませんが、上記のコードは実際に動作しています。私は正しいの輸出をtsxファイルから紛失していました。そして、browserify/tsifyは出力するのに役立つものが見つからなかったはずです。

とにかく、この設定がうまくいきます。これは、JavaScriptの強みを活かして、javascriptプロジェクトを構築し続けるのがとても簡単です。

関連する問題