使用TypeScript和Babel的Gulp源地图
我目前正在编写一个项目，在那里我可以学习更多关于TypeScript和ES6（使用babel）的知识。
我想用我的TypeScript使用ES6，所以我决定采用以下工作流程。
Typescript (ES6) -> Babel (ES6) -> ES5
现在我正在使用Gulp来自动化所有这些，并且我很难获得正确生成的源映射。 我应该提及这种风格是由用户在/ r / typescript中向我推荐的，所以我甚至不确定它是否可行。
无论如何，这里是我目前的g task任务
var server = $.typescript.createProject('src/server/tsconfig.json');
gulp.task('build', ['vet'], function () {
var sourceRoot = path.join(__dirname, 'src/server/**/*.ts');
return gulp.src('src/server/**/*.ts')
.pipe($.sourcemaps.init())
.pipe($.typescript(server))
.pipe($.babel())
.pipe($.sourcemaps.write('.', { sourceRoot: sourceRoot}))
.pipe(gulp.dest('build/server'));
});
我尝试了很多不同的方法，但都没有成功。 在VSCode中进行调试时，我的app： build/server/index.js的入口src/server/index.ts正确加载并找到源文件src/server/index.ts 。
然而，当VSCode试图步入另一个文件中说， build/server/utils/logger/index.js看起来对src/server/utils/logger/index.js它没有找到，因为它应该寻找一个*。 ts文件。
那么我做错了什么？ 或者这甚至有可能？ 我一直盯着这个大约5个小时。 所以任何见解都会很棒。
此外，VSCode 0.9.x显示'.../.js' file not found /。js '.../.js' file not found而VSCode 1.0只是无声无息地失败。
我的tsconfig.json，它通过$.typescript.createProject()传入
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"target": "ES6",
"sourceMap": true,
"outDir": "build/server"
}
}
.babelrc
{
"presets": ["es2015"]
}
这里是相关的npm包
"devDependencies": {
"babel-polyfill": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"gulp-babel": "^6.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-typescript": "^2.9.2"
}
编辑：我已经做了一些调查的gulp-sourcemaps，并且当不使用babel时，sourcemaps正常工作。 （删除所有不相关的信息）
src / server / up / up2 / four.ts - 没有Babel
{
"history": [ "/home/user/code/test/src/server/up/up2/four.js" ],
"base": "/home/user/code/test/src/server/",
"sourceMap": {
"sources": ["up/up2/four.ts"],
"file": "up/up2/four.js"
}
}
注意在sourceMap.sources它如何列出正确的源文件up/up2/four.ts
现在，当我将gulp-babel添加到任务中时，就是一个例子。
src / server / up / up2 / four.ts - 使用Babel
{
"history": [ "/home/user/code/test/src/server/up/up2/four.js" ],
"base": "/home/user/code/test/src/server/",
"sourceMap": {
"sources": ["four.js"],
"file": "up/up2/four.js"
},
"babel": {
"...": "..."
}
}
注意sourceMap.sources现在不正确地显示four.js而不是four.js文件。
奇怪的是，只要打字稿文件在根目录src/server他们就可以很好地构建源地图。
src / server / two.ts - 使用Babel
{
"history": [ "/home/user/code/test/src/server/two.js" ],
"base": "/home/user/code/test/src/server/",
"sourceMap": {
"sources": ["two.ts"],
"file": "two.js"
},
"babel": {
"...": "..."
}
}
更新
看来这个问题中的具体问题与Babel对不在工作目录中的文件的源代码地图生成不正确有关。 这里已经存在一个问题。
对于像乙烯文件对象
new File({
cwd: '.',
base: './test/',
path: './test/some/file.js'
...
});
生成的源地图应该有类似的东西
{
...
"sources": ["some/file.js"]
...
}
但gulp-babel给
{
...
"sources": ["file.js"]
...
}
这会导致Typescript源映射和Babel源映射不正确地合并，但仅当文件比工作目录更深时。
在解决这个问题的同时，我建议用Typescript将ES5作为目标，并完全绕开Babel。 这会产生正确的源地图。
gulp.task('build', function () {
return gulp.src('src/server/**/*.ts')
.pipe(sourcemaps.init())
.pipe(typescript({
noImplicitAny: true,
removeComments: true,
preserveConstEnums: true,
target: 'es5',
module: 'commonjs'
}))
.pipe(sourcemaps.write('.', { sourceRoot: 'src/server' }))
.pipe(gulp.dest('build/server'));
});
以前的答案
你很近，但是我在你的配置中发现了一些错误：
"module": "commonjs"与"target": "es6"不兼容"target": "es6" 。 用Typescript输出ES6模块并让Babel将它们转换成CommonJS。 "outDir" 。 中级结果（即打字稿的结果）根本不写入磁盘。 "sourceMap": true与Gulp sourcemaps一起sourcemaps 。 我创建了一个为我编译的项目，其中babel@6.1.18和typescript@1.6.2。
目录结构
.
├── gulpfile.js
└── src
└── server
├── one.ts
└── two.ts
one.ts
export class One {};
two.ts
import { One } from './one';
export class Two extends One {}
gulpfile.js
我已经将所有配置都内联了，但您应该可以轻松地使用配置文件。
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var typescript = require('gulp-typescript');
var babel = require('gulp-babel');
gulp.task('build', function () {
return gulp.src('src/server/**/*.ts')
.pipe(sourcemaps.init())
.pipe(typescript({
noImplicitAny: true,
removeComments: true,
preserveConstEnums: true,
target: 'es6'
}))
.pipe(babel({
presets: [ 'es2015' ]
}))
.pipe(sourcemaps.write('.', { sourceRoot: 'src/server' }))
.pipe(gulp.dest('build/server'));
});