编译Angular2 TS时如何配置gulp-typescript以与JSPM一起使用

Posted 2023-02-19

【中文标题】编译Angular2 TS时如何配置gulp-typescript以与JSPM一起使用

【英文标题】：How to configure gulp-typescript to work with JSPM when transpiling Angular2 TS

【发布时间】：2016-06-17 10:33:30

【问题描述】：

我们有一个如下所示的 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 配置，但我现在不确定如何做到这一点。

有人有什么想法吗？

【参考方案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/

【讨论】：

你能补充一些细节吗？这个答案很差，因为问题是如何用打字稿配置它，而不是“我应该使用什么库？”

我添加了更多信息。推荐使用 Gulp-jspm 作为将 SystemJS 配置绑定到 gulp 构建过程中的一种方式。