[英]How to configure gulp-typescript to work with JSPM when transpiling Angular2 TS
我们有一个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配置,但我现在还不确定如何做到这一点。
有没有人有任何想法?
尝试使用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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.