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 配置，但我现在不确定如何做到这一点。

有没有人有任何想法？

4

1 回答 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/

于 2016-04-15T20:18:41.387 回答