我正在尝试使用 gulp typescript 编译器运行 angular 2 示例。 gulp 脚本编译
import {Component, View, bootstrap} from 'angular2/angular2';
到
var angular2_1 = require("angular2/angular2")
它不在浏览器中运行。这有什么问题？据我所知，这种'require'的实现只与nodeJS一起使用。为什么 TypeScript 编译器还是那样编译？
有人有什么想法吗？
亲切的问候
【问题讨论】：
标签： typescript gulp angular
那是因为您通过将 commonjs 传递给 --module 标志或只是 -m 来编译由节点提供的 typescript 文件。
你也可以传入amd：
> tsc.cmd -m amd -t es5 --emitDecoratorMetadata app.ts
这将产生以下js：
define(["require", "exports", "angular2/angular2"], function (require, exports, angular2_1)
否则，如果您只是希望它像他们的示例一样工作，请安装 http-server 模块并提供页面。
> npm install -g http-server
> http-server
并访问
localhost:8080/index.html
【讨论】：
我无法使其正常工作，但能够使用 gulp-traceur 使其正常工作。这是我的 gulpfile。
var gulp = require('gulp');
var gulpTraceur = require('gulp-traceur');
var through2 = require('through2');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var copy = require('gulp-copy');
gulp.task('compile',function() {
return gulp.src("./*.es6.js")
.pipe(sourcemaps.init())
.pipe(gulpTraceur({
sourceMaps: true,
outputLanguage: 'es5',
annotations: true, // parse annotations
types: true, // parse types
script: false, // parse as a module
memberVariables: true, // parse class fields
modules: 'instantiate'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'));
});
gulp.task('copy', function () {
return gulp.src(['*.html', '*.css'])
.pipe(copy('dist'));
});
gulp.task('watch', function () {
gulp.watch(['*.html', '*.css', './*.es6.js'], ['compile', 'copy']);
});
gulp.task('default', ['compile', 'copy', 'watch']);
项目可以在这里看到：
【讨论】：