ASP.Net Core + Angular 2 + SystemJS: transpilation для машиностроения

Question

Я использую Visual Studio 2015 Update 3 для создания основного приложения ASP.Net, которое запускает приложение с угловым 2. Я использую SystemJs для конфигурации, которую я выбрал на одном из сайтов, и он имеет эту строку кода с комментарием.

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

Я понимаю причину комментария. Мое приложение в настоящее время работает медленно. Хотелось бы узнать, какие другие варианты доступны, чтобы убедиться, что трансляция не происходит в браузере? Как я могу предварительно преобразовать код и загрузить непосредственно из выходного местоположения?

Answer 1

Обычно это означает, что файлы ts отправляются в браузер и транслируются там вместо того, чтобы происходить на стороне сервера и js-код, который должен быть отправлен и выполнен на стороне клиента.

Поскольку вы используете глоток, вы можете создать задачу, чтобы перекрыть файлы машинописных файлов и расслоить их. Для этого вы можете использовать пакет "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: запускает задачу «лить», чтобы ваш код соответствовал определенным правилам, определенным в файле tsline.js (вы можете пропустить это, если хотите).

компиляции TS: Собирает TypeScript к JavaScript и генерирует карту исходные файлы, используемые для отладки кода машинопись в браузерах, таких как Chrome.

clean-ts: Используется для удаления всех сгенерированных файлов JavaScript и файлов исходных файлов.

часы: Часы папку, в которой TypeScript код жизни и запускает TS-нибудь вкусненькое, компилировать-ц, и ген-ц-ссудами задачи, как файлы изменений обнаруживаются.

default: Задача Grunt по умолчанию, которая запускает другие задачи для запуска. Эта задача может быть запущена, набрав gulp на command-line, когда вы находитесь в папке typescriptDemo.

Примечание:

Вы должны изменить папки на основе вашей файловой структуры, но суть его в том, что вам нужно эти TypeScript файлы для компиляции и передаются в браузер в виде обычного JavaScript.