Question

我正在使用Visual Studio 2015 Update 3来创建运行角度2应用程序的ASP.Net核心应用程序。我正在使用SystemJs进行配置，我从其中一个站点中选择了它，并且这行代码包含注释。

// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'typescript',

我理解评论的原因。我的申请目前很慢。我想知道有哪些其他选项可以确保浏览器中不会发生转换？如何预先转换代码并直接从输出位置加载？

Answer 1

这通常意味着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发送到浏览器。

ASP.Net Core + Angular 2 + SystemJS：typescript transpilation

1 个答案: