如何通过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应用程序？

回答

相关问题