Как настроить Глоток-машинописный работать с JSPM когда transpiling Angular2 TS

Question

У нас есть сценарий глотка, который выглядит следующим образом (только соответствующие части показаны):

const gulp = require('gulp'); 
const typescript = require('gulp-typescript'); 
const sourcemaps = require('gulp-sourcemaps'); 
const tscConfig = require('./tsconfig.json'); 
const inlineNg2Templates = require('gulp-inline-ng2-template'); 
const paths = { 
    distAssetsFolder: 'dist/assets', 
    distFolder: 'dist', 
    distLibFolder: 'dist/lib', 
    distFiles: 'dist/**/*', 
    srcMapFolder: './maps', 
    srcFiles: 'src/**/*', 
    srcAssetFolder: 'src/assets/**/*', 
    srcMainSassFile: 'src/**/main.scss', 
    srcTsFiles: 'src/**/*.ts', 
    srcTestFiles : 'src/**/*.spec.ts' 
}; 
gulp.task('transpile-typescript', ['clean:dist'], function() { 
    return gulp 
     .src(paths.srcTsFiles) 
     .pipe(inlineNg2Templates({ useRelativePaths: true})) 
     .pipe(sourcemaps.init()) 
     .pipe(typescript(tscConfig.compilerOptions)) 
     .pipe(sourcemaps.write(paths.srcMapFolder)) 
     .pipe(gulp.dest(paths.distFolder)); 
}); 

Мы используем JSPM для нашей зависимости менеджеры & имеют jspm-config.js в корне нашего проекта.

Независимо от того, какой задачи в нашем глотке сценарии мы бежим, мы получим следующие ошибки:

Src \ App \ врезку \ panel.component.ts (1,46): ошибка TS2307: Не может найти модуль 'angular2/ядро'. src \ app \ sidebar \ panel.component.ts (2,30): ошибка TS2307: Не удается найти модуль 'angular2/http'. src \ app \ uiComponents \ demo \ demo.ts (1,25): ошибка TS2307: Не удается найти модуль 'angular2/core'. src \ app \ uiComponents \ modal \ modal.ts (1,54): ошибка TS2307: Не удается найти модуль 'angleular2/core'. src \ app \ uiComponents \ modal \ modal.ts (2,23): ошибка TS2307: Не удается найти модуль 'angleular2/common'.

Однако; приложение работает отлично. Во время выполнения этих ошибки разрешаются картой в нашем JSPM-config.js файл, который содержит что-то вроде следующего:

"angular2": "npm:angular2@2.0.0-beta.7", 

я понимаю, нам просто нужно каким-то образом ссылаться на JSPM конфигурации во время transpile, но я m просто не уверен, как это сделать на данный момент.

У кого-нибудь есть идеи?

Answer 1

Попробуйте использовать gulp-jspm. См. Документацию по адресу: https://www.npmjs.com/package/gulp-jspm.

Сначала настроить JSPM config.js использовать машинопись как transpiler, а также распознавать тс файлы:

System.config({ 
    baseURL: "/", 
    defaultJSExtensions: true, 
    transpiler: "typescript", 

    packages: { 
    "app": { 
     "defaultExtension": "ts" 
    } 
    }, 

(...other settings...) 
} 

Затем заменить вызов машинопись в вашем gulpfile с JSPM. Пример:

var jspm = require('gulp-jspm'); 

gulp.task("jspmBundle", function() { 
    return gulp.src(TS_GLOB) 
     .pipe(jspm()) 
     .pipe(gulp.dest(DIST_TARGET_PATH)); 
}); 

Вы также можете настроить среду разработки, чтобы настроить SystemJS на переход на лету. Подробнее об этом здесь:

https://yakovfain.com/2015/10/13/starting-an-angular-2-project-with-typescript-and-jspm/