如何通過Gulp正確綁定Angular2-JS/Typescript應用程序？

注：我知道有幾個類似的問題（這裏提到的資源庫來源於其中的一個），但我還是不明白什麼是不工作如何通過Gulp正確綁定Angular2-JS/Typescript應用程序？

具體來說，我試圖複製的簡單的應用程序的邏輯在：https://github.com/templth/angular2-packaging

的問題（見下面我咕嘟咕嘟配置文件），我得到./dist只有3個文件：

app.min.js < - 這僅僅是一個9行行代碼（和我的應用程序更復雜）包含：var __decorate =（this & & this .__ decorate）|| ...
的index.html < - 這似乎是「完成」
vendors.ts < - 這似乎是「完成」

什麼情況是，應用程序只顯示「中.. 「沒有錯誤，如果我去‘源’（Chrome瀏覽器開發工具），我看到什麼是真正加載（除3檔上面，因爲我看到他們在./dist目錄）

我也嘗試：

繞過打字稿，只是捆綁JS文件，但發生的事情是，所有的文件都在那裏，但我得到
沒有醜化

要求沒有定義

我的Gulp配置文件

'use strict'; 

const gulp = require('gulp'); 
const ts = require('gulp-typescript'); 
const uglify = require('gulp-uglify'); 
const concat = require('gulp-concat'); 
var htmlreplace = require('gulp-html-replace'); 
var addsrc = require('gulp-add-src'); 

gulp.task('app-bundle', function() { 
    var tsProject = ts.createProject('tsconfig.json', { 
     typescript: require('typescript'), 
     outFile: 'app.js' 
    }); 

    var tsResult = gulp.src([ 
     'node_modules/**/*.ts.d', 
     'typings/**/*.ts.d', 
     'app/**/*.ts' 
    ]).pipe(ts(tsProject)); 

    return tsResult.js 
     .pipe(addsrc.append('config-prod.js')) 
     .pipe(concat('app.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp.task('vendor-bundle', function() { 
    gulp.src([ 
     'node_modules/core-js/client/shim.min.js', 
     'node_modules/zone.js/dist/zone.js', 
     'node_modules/reflect-metadata/Reflect.js', 
     'node_modules/systemjs/dist/system.src.js' 
    ]) 
     .pipe(concat('vendors.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle' ], function() { 
    gulp.src('index.html') 
     .pipe(htmlreplace({ 
      'vendor': 'vendors.min.js', 
      'app': 'app.min.js' 
     })) 
     .pipe(gulp.dest('dist')); 
}); 

// define which tasks should Gulp launch 
gulp.task('default', ['app-bundle', 'vendor-bundle','html-replace']);

來源

2016-07-14 dragonmnl

您應該使用稱爲「systemjs builder」的特殊gulp模塊。你也應該在tsconfig.js中使用編譯參數作爲「commonjs」。此外，它應該是包含在該文件中的npm引用。所有這些都可以解決您的問題。

來源

2016-07-15 10:57:23

@感謝Artem的詳細解答。不會改變爲commonjs打破應用程序？另外，我沒有真正得到「應該是包含在該文件中的npm引用......」。你是什麼意思？ – dragonmnl

我得到你最後的評論，事情是我也有一個typings.json指定的依賴關係（事實上，與Angular 2構建過程「npm開始」我沒有實時編譯問題，甚至沒有初始化（剛綁定後該命令沒有進一步的改變）真的有必要在tsconfig.json文件中指定它們嗎？ – dragonmnl

實際上我發現這個https://github.com/templth/angular2-packaging（它的確使用了systemjs builder）。問題與我，但我會弄明白！ – dragonmnl

如何通過Gulp正確綁定Angular2-JS/Typescript應用程序？

回答

相關問題