Gulp 使用 TypeScript 和 Babel 的 sourcemaps
Gulp sourcemaps with TypeScript and Babel
我目前正在写一个业余项目,在那里我可以了解更多关于 TypeScript 和 ES6(使用 babel)的信息。
我想在我的 TypeScript 中使用 ES6,所以我确定了以下工作流程。
Typescript (ES6) -> Babel (ES6) -> ES5
现在我正在使用 Gulp 来自动执行所有这些操作,但我很难正确生成源映射。我应该提到这种风格是 /r/typescript 上的一位用户向我推荐的,所以我什至不确定它是否可行。
无论如何这是我当前的 gulp 任务
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'));
});
我尝试了很多不同的方法,但 none 行得通。在 VSCode 中调试时,我的应用程序的入口点:build/server/index.js
加载并正确找到源文件 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
和 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
而不是 typescript 文件。
奇怪的是,只要 typescript 文件在根目录中 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 为不在工作目录中的文件生成的源映射不正确有关。已经有一个问题提交 here。
对于像
这样的乙烯基文件对象
new File({
cwd: '.',
base: './test/',
path: './test/some/file.js'
...
});
生成的源映射应该有类似
的内容
{
...
"sources": ["some/file.js"]
...
}
但 gulp-babel
给出
{
...
"sources": ["file.js"]
...
}
这会导致 Typescript source maps 和 Babel source maps 被错误地合并,但只有当文件比工作目录更深时才会这样。
虽然这个问题正在解决,但我建议使用 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"
不兼容。使用 Typescript 输出 ES6 模块,让 Babel 将它们转译为 CommonJS。
"outDir"
在使用 Gulp 时不是必需的,因为您正在使用流。中间结果(即 Typescript 的结果)根本不会写入磁盘。
"sourceMap": true
不需要和 Gulp 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'));
});
我目前正在写一个业余项目,在那里我可以了解更多关于 TypeScript 和 ES6(使用 babel)的信息。
我想在我的 TypeScript 中使用 ES6,所以我确定了以下工作流程。
Typescript (ES6) -> Babel (ES6) -> ES5
现在我正在使用 Gulp 来自动执行所有这些操作,但我很难正确生成源映射。我应该提到这种风格是 /r/typescript 上的一位用户向我推荐的,所以我什至不确定它是否可行。
无论如何这是我当前的 gulp 任务
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'));
});
我尝试了很多不同的方法,但 none 行得通。在 VSCode 中调试时,我的应用程序的入口点:build/server/index.js
加载并正确找到源文件 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
和 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
而不是 typescript 文件。
奇怪的是,只要 typescript 文件在根目录中 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 为不在工作目录中的文件生成的源映射不正确有关。已经有一个问题提交 here。
对于像
这样的乙烯基文件对象new File({
cwd: '.',
base: './test/',
path: './test/some/file.js'
...
});
生成的源映射应该有类似
的内容{
...
"sources": ["some/file.js"]
...
}
但 gulp-babel
给出
{
...
"sources": ["file.js"]
...
}
这会导致 Typescript source maps 和 Babel source maps 被错误地合并,但只有当文件比工作目录更深时才会这样。
虽然这个问题正在解决,但我建议使用 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"
不兼容。使用 Typescript 输出 ES6 模块,让 Babel 将它们转译为 CommonJS。"outDir"
在使用 Gulp 时不是必需的,因为您正在使用流。中间结果(即 Typescript 的结果)根本不会写入磁盘。"sourceMap": true
不需要和 Gulpsourcemaps
.
我创建了一个为我编译的项目,使用 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'));
});