首页 文章

如何在转换Angular2 TS时配置gulp-typescript以使用JSPM

提问于
浏览 次
3

我们有一个gulp脚本，如下所示（仅显示相关部分）：

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 .

无论我们运行的gulp脚本中的任务是什么，我们都会遇到以下错误：

src \ app \ sidebar \ panel.component.ts（1,46）：错误TS2307：找不到模块'angular2 / core' . 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：找不到模块'angular2 / core' . src \ app \ uiComponents \ modal \ modal.ts（2,23）：错误TS2307：找不到模块'angular2 / common' .

然而;该应用程序工作正常 . 在运行时，这些错误由我们的jspm-config.js文件中的映射解决，该文件包含如下内容：

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

我意识到我们只需要在转换时以某种方式引用jspm配置，但我现在还不确定如何做到这一点 .

有没有人有任何想法？

typescript angular jspm gulp-typescript

1 回答

  • 0

    尝试使用gulp-jspm . 请参阅以下文档：https://www.npmjs.com/package/gulp-jspm .

    首先设置你的jspm config.js以使用typescript作为转换器并识别ts文件：

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

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

(...other settings...)
}

    然后用jspm替换gulpfile中的typescript调用 . 例：

    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/

    回复于

相关问题