角锥2预置式编译器

Question

用Angular 2 rc 6编写的Typescript 2.0.2

我正在尝试提前学习编译如本文所述.这似乎很简单：

• 运行ngc而不是类型记录编译器来生成.ngfactory.ts文件
• 将platformBrowserDynamic().bootstrapModule()替换为platformBrowser().bootstrapModuleFactory()

我不知道如何将第一步应用到我的设置中。我使用gulp-typescript 2.13.6将我的打字本编译成JavaScript。

gulpfile.js

var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
    //Use TS version installed by NPM instead of gulp-typescript's built-in
    typescript: require('typescript')
});
gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(ts(tsProject))
        .pipe(gulp.dest(appProd));
});

因此，我的问题是:如何将这些指令集成到我的工具中？如何使gulp-typescript使用角编译器？我试过：

var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('@angular/compiler') // or '@angular/compiler-cli'
});

这会在不运行ngc的情况下引发错误。我也试过

var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('./node_modules/.bin/ngc')
});

这确实执行了ngc，但立即引发错误：

SyntaxError: ngc:2中的意外字符串: basedir=$(dirname“$”(echo "$0“x= sed -e 's，\，/，g‘s)”)

我怀疑这是因为没有将源目录传递给ngc (所需的命令是ngc -p path/to/project)。

基本上，是否有一种方法可以使用gulp-typescript进行一步构建过程？(生成.ngfactory.ts文件，然后将所有文件编译为JavaScript)

Answer 1

我想typescript: require(..)不起作用的原因是因为gulp类型的文本查找typescript或尝试运行命令tsc，而且由于角编译器命令是ngc，所以找不到它。

现在，如果您的项目与编译项目一样简单，您只需从gulp中运行命令，如下所示：

var exec = require('child_process').exec;

gulp.task('task', function (cb) {
  exec('ngc -p "<path to your tsconfig.json>"', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

这要求在配置标题下设置正确的tsconfig.json，以及谷歌谈论这里的潜在额外选项。

如果您需要更复杂的功能，如gulp包所提供的，恐怕您将不得不自己开发它，或者等待其他人来开发。

Answer 2

我也在努力让它发挥作用，威廉·吉尔莫的回答帮了我很多忙。

我对它进行了一些扩展，以运行本地ngc安装(比如运行node_modules/.bin中的Range2 示例 )，它在Linux和node_modules/.bin系统上都能运行：

var exec = require('child_process').exec;
var os = require('os');

gulp.task('build-ts', function (cb) {

    var cmd = os.platform() === 'win32' ? 
        'node_modules\\.bin\\ngc' : './node_modules/.bin/ngc';

    exec(cmd, function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        cb(err);
    });
});

Answer 3

这是gulpfile的跨平台版本，我目前正在使用该版本进行时间提前编译(AOT)，使用的是角2：

//jshint node:true
//jshint esversion: 6
'use strict';

...

// helper function for running ngc and tree shaking tasks
const run_proc = (cmd, callBack, options) => {
        process.stdout.write(stdout);
        process.stdout.write(stderr);
        callBack(err);
    });
};


gulp.task('ngc', ['css', 'html', 'ts'], cb => {
    let cmd  = 'node_modules/.bin/ngc -p tsconfig-aot.json';
    if (isWin) {
        cmd  = '"node_modules/.bin/ngc" -p tsconfig-aot.json';
    }
    return run_proc(cmd, cb);
});

可以在我的github：英雄之旅(ToH)上查看gulp.js示例的整个示例

这是肯定的短期解决方案，我的长期解决方案将是gulp插件。