使用TypeScript和Babel的Gulp源图

Question

我目前正在编写一个侧面项目,我可以在其中了解有关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'));
});

我尝试了很多不同的方法,但都没有.在VSCode中调试时,我的app的入口点:正确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时,源图可以正常工作.(删除了所有不相关的信息)

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文件.

奇怪的是,只要打字稿文件在根目录中,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": {
    "...": "..."
  }
}

Answer 1

更新

\n\n

看来这个问题中的具体问题与 Babel 对不在工作目录中的文件生成错误的源映射有关。这里已经提交了一个问题。

\n\n

对于像这样的乙烯基文件对象

\n\n

new File({\n  cwd: \'.\',\n  base: \'./test/\',\n  path: \'./test/some/file.js\'\n  ...\n});\n

\n\n

the generated source map should have something like

\n\n

{\n  ...\n  "sources": ["some/file.js"]\n  ...\n}\n

\n\n

but gulp-babel gives

\n\n

{\n  ...\n  "sources": ["file.js"]\n  ...\n}\n

\n\n

This causes the Typescript source maps and Babel source maps to be incorrectly merged, but only when the file is deeper than the working directory.

\n\n

While this issue is being resolved, I recommend targeting ES5 with Typescript and bypassing Babel completely. This produces correct source maps.

\n\n

gulp.task(\'build\', function () {\n  return gulp.src(\'src/server/**/*.ts\')\n    .pipe(sourcemaps.init())\n    .pipe(typescript({\n      noImplicitAny: true,\n      removeComments: true,\n      preserveConstEnums: true,\n      target: \'es5\',\n      module: \'commonjs\'\n    }))\n    .pipe(sourcemaps.write(\'.\', { sourceRoot: \'src/server\' }))\n    .pipe(gulp.dest(\'build/server\'));\n});\n

\n\n\n\n

Previous Answer

\n\n

You are close, but there are a couple mistakes I noticed in your configuration:

\n\n

\n
1. "module": "commonjs" is incompatible with "target": "es6". Output ES6 modules with Typescript and let Babel transpile them to CommonJS.
\n
2. "outDir" is not necessary when using Gulp since you are working with a stream. Intermediate results (i.e. results of Typescript) are not written to disk at all.
\n
3. "sourceMap": true is not necessary together with Gulp sourcemaps.
\n

\n\n

I have created a project which compiled for me, with babel@6.1.18 and typescript@1.6.2.

\n\n

Directory structure

\n\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 gulpfile.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 server\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 one.ts\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 two.ts\n

\n\n

one.ts

\n\n

export class One {};\n

\n\n

two.ts

\n\n

import { One } from \'./one\';\n\nexport class Two extends One {}\n

\n\n

gulpfile.js

\n\n

I have inlined all configurations for terseness, but you should be able to use config files just as easily.

\n\n

var gulp = require(\'gulp\');\n\nvar sourcemaps = require(\'gulp-sourcemaps\');\nvar typescript = require(\'gulp-typescript\');\nvar babel = require(\'gulp-babel\');\n\ngulp.task(\'build\', function () {\n  return gulp.src(\'src/server/**/*.ts\')\n    .pipe(sourcemaps.init())\n    .pipe(typescript({\n      noImplicitAny: true,\n      removeComments: true,\n      preserveConstEnums: true,\n      target: \'es6\'\n    }))\n    .pipe(babel({\n      presets: [ \'es2015\' ]\n    }))\n    .pipe(sourcemaps.write(\'.\', { sourceRoot: \'src/server\' }))\n    .pipe(gulp.dest(\'build/server\'));\n});\n

\n