Question

我们有一个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进行依赖管理＆amp;将jspm-config.js放在我们项目的根目录下。

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

src \ app \ sidebar \ panel.component.ts（1,46）：错误TS2307：找不到模块＆＃39; angular2 / core＆＃39;。 src \ app \ sidebar \ panel.component.ts（2,30）：错误TS2307：找不到模块＆＃39; angular2 / http＆＃39;。 src \ app \ uiComponents \ demo \ demo.ts（1,25）：错误TS2307：找不到模块＆＃39; angular2 / core＆＃39;。 SRC \应用\的UIComponents \模态\ modal.ts（1,54）：错误TS2307：找不到模块＆＃39; angular2 / core＆＃39;。 src \ app \ uiComponents \ modal \ modal.ts（2,23）：错误TS2307：找不到模块＆＃39; angular2 / common＆＃39;。

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

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

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

有没有人有任何想法？

Answer 1

尝试使用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/

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

1 个答案: