我正在使用Visual Studio 2015 Update 3来创建运行角度2应用程序的ASP.Net核心应用程序。我正在使用SystemJs进行配置,我从其中一个站点中选择了它,并且这行代码包含注释。
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'typescript',
我理解评论的原因。我的申请目前很慢。 我想知道有哪些其他选项可以确保浏览器中不会发生转换?如何预先转换代码并直接从输出位置加载?
答案 0 :(得分:0)
这通常意味着ts文件被发送到浏览器并在那里被转换而不是在服务器端发生,并且js代码将在客户端发送和执行。
由于您正在使用gulp,因此您可以创建一个任务来转换打字稿文件并将其捆绑。您可以使用"gulp-typescript": "^2.5.0"
包来实现此目的。
但是,您需要先设置配置(我只是从他们的repo复制粘贴配置):
'use strict';
var GulpConfig = (function () {
function gulpConfig() {
//Got tired of scrolling through all the comments so removed them
//Don't hurt me AC :-)
this.source = './src/';
this.sourceApp = this.source + 'app/';
this.tsOutputPath = this.source + '/js';
this.allJavaScript = [this.source + '/js/**/*.js'];
this.allTypeScript = this.sourceApp + '/**/*.ts';
this.typings = './typings/';
this.libraryTypeScriptDefinitions = './typings/main/**/*.ts';
}
return gulpConfig;
})();
module.exports = GulpConfig;
然后您需要设置任务,最简单的方法是再次从repo复制粘贴已设置的任务:
'use strict';
var gulp = require('gulp'),
debug = require('gulp-debug'),
inject = require('gulp-inject'),
tsc = require('gulp-typescript'),
tslint = require('gulp-tslint'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
Config = require('./gulpfile.config'),
tsProject = tsc.createProject('tsconfig.json'),
browserSync = require('browser-sync'),
superstatic = require( 'superstatic' );
var config = new Config();
/**
* Generates the app.d.ts references file dynamically from all application *.ts files.
*/
// gulp.task('gen-ts-refs', function () {
// var target = gulp.src(config.appTypeScriptReferences);
// var sources = gulp.src([config.allTypeScript], {read: false});
// return target.pipe(inject(sources, {
// starttag: '//{',
// endtag: '//}',
// transform: function (filepath) {
// return '/// <reference path="../..' + filepath + '" />';
// }
// })).pipe(gulp.dest(config.typings));
// });
/**
* Lint all custom TypeScript files.
*/
gulp.task('ts-lint', function () {
return gulp.src(config.allTypeScript).pipe(tslint()).pipe(tslint.report('prose'));
});
/**
* Compile TypeScript and include references to library and app .d.ts files.
*/
gulp.task('compile-ts', function () {
var sourceTsFiles = [config.allTypeScript, //path to typescript files
config.libraryTypeScriptDefinitions]; //reference to library .d.ts files
var tsResult = gulp.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
tsResult.dts.pipe(gulp.dest(config.tsOutputPath));
return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.tsOutputPath));
});
/**
* Remove all generated JavaScript files from TypeScript compilation.
*/
gulp.task('clean-ts', function (cb) {
var typeScriptGenFiles = [
config.tsOutputPath +'/**/*.js', // path to all JS files auto gen'd by editor
config.tsOutputPath +'/**/*.js.map', // path to all sourcemap files auto gen'd by editor
'!' + config.tsOutputPath + '/lib'
];
// delete the files
del(typeScriptGenFiles, cb);
});
gulp.task('watch', function() {
gulp.watch([config.allTypeScript], ['ts-lint', 'compile-ts']);
});
gulp.task('serve', ['compile-ts', 'watch'], function() {
process.stdout.write('Starting browserSync and superstatic...\n');
browserSync({
port: 3000,
files: ['index.html', '**/*.js'],
injectChanges: true,
logFileChanges: false,
logLevel: 'silent',
logPrefix: 'angularin20typescript',
notify: true,
reloadDelay: 0,
server: {
baseDir: './src',
middleware: superstatic({ debug: false})
}
});
});
gulp.task('default', ['ts-lint', 'compile-ts']);
这会创建以下Gulp
任务:
gen-ts-refs :将所有TypeScript
文件路径添加到名为typescriptApp.d.ts的文件中。此文件将用于支持某些编辑器中的代码帮助以及帮助编译TypeScript
文件。
ts-lint:运行“linting”任务以确保您的代码遵循tsline.js文件中定义的特定准则(如果您愿意,可以跳过此步骤。)
compile-ts :将TypeScript
编译为JavaScript
,并生成用于在Chrome等浏览器中调试TypeScript代码的源地图文件。
clean-ts :用于删除所有生成的JavaScript文件和源地图文件。
观看:观察TypeScript
代码所在的文件夹,并在检测到文件更改时触发ts-lint,compile-ts和gen-ts-refs任务。
默认:将触发其他任务运行的默认Grunt任务。当您在command-line
文件夹中时,可以通过在typescriptDemo
输入gulp来运行此任务。
注意:
您需要根据文件结构更改文件夹,但要点是您需要编译这些TypeScript
文件并将其作为普通JavaScript
发送到浏览器。