Angular 2 使用 gulp-typescript 的预编译器
Angular 2 Ahead-of-Time Compiler with gulp-typescript
Angular 2 rc 6
写成Typescript 2.0.2
我正在尝试学习提前编译 。看起来很简单:
- 运行
ngc
代替 Typescript 编译器生成 .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
使用 Angular 编译器?我试过:
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: Unexpected string at ngc:2: basedir=$(dirname "$(echo "[=29=]" | sed -e 's,\,/,g')")
我怀疑这是因为没有源目录被传递给ngc
(需要的命令是ngc -p path/to/project
)
基本上,有没有办法使用 gulp-typescript
进行一步构建过程? (生成 .ngfactory.ts
个文件,然后全部编译为 JavaScript)
我想 typescript: require(..)
不工作的原因是因为 gulp-typescript 寻找叫做 typescript
的东西或试图 运行 命令 tsc
,并且由于 angular 编译器命令是 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
,并在配置标题下使用 Google 讨论 here 的潜在额外选项。
如果您需要 gulp-typescript 软件包提供的更复杂的功能,恐怕您要么必须自己开发,要么等待其他人开发。
我也试图让它发挥作用,William Gilmour 的 帮了我大忙。
我将其扩展到 运行 本地 ngc
安装(例如 angular 2 example 运行 中的 node_modules/.bin
),并且在 Linux 和 Windows 系统上都有效:
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);
});
});
这是 gulp 文件的跨平台版本,我目前正在使用它进行提前 (AOT) 编译 angular 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);
});
随时查看 Tour of Heroes (ToH) example with gulp.js on my github repo: ng2-heroes-gulp
的整个示例
这肯定是短期解决方案,对我来说长期解决方案是 gulp-ngc 插件。
Angular 2 rc 6
写成Typescript 2.0.2
我正在尝试学习提前编译
- 运行
ngc
代替 Typescript 编译器生成.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
使用 Angular 编译器?我试过:
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: Unexpected string at ngc:2: basedir=$(dirname "$(echo "[=29=]" | sed -e 's,\,/,g')")
我怀疑这是因为没有源目录被传递给ngc
(需要的命令是ngc -p path/to/project
)
基本上,有没有办法使用 gulp-typescript
进行一步构建过程? (生成 .ngfactory.ts
个文件,然后全部编译为 JavaScript)
我想 typescript: require(..)
不工作的原因是因为 gulp-typescript 寻找叫做 typescript
的东西或试图 运行 命令 tsc
,并且由于 angular 编译器命令是 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
,并在配置标题下使用 Google 讨论 here 的潜在额外选项。
如果您需要 gulp-typescript 软件包提供的更复杂的功能,恐怕您要么必须自己开发,要么等待其他人开发。
我也试图让它发挥作用,William Gilmour 的
我将其扩展到 运行 本地 ngc
安装(例如 angular 2 example 运行 中的 node_modules/.bin
),并且在 Linux 和 Windows 系统上都有效:
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);
});
});
这是 gulp 文件的跨平台版本,我目前正在使用它进行提前 (AOT) 编译 angular 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);
});
随时查看 Tour of Heroes (ToH) example with gulp.js on my github repo: ng2-heroes-gulp
的整个示例这肯定是短期解决方案,对我来说长期解决方案是 gulp-ngc 插件。