使用TypeScript和Babel的Gulp源地图 [英] Gulp sourcemaps with TypeScript and Babel

问题描述

我目前正在编写一个侧面项目，在那里我可以更多地了解TypeScript和ES6（使用babel）。

我想用我的TypeScript使用ES6，所以我以下面的工作流程为基础。

Typescript（ES6） - > Babel（ES6） - > ES5

现在我正在使用Gulp来自动化所有这些，并且我很难获得正确生成的源地图。我应该提到，这种风格是由用户在/ r / typescript中向我推荐的，所以我甚至不确定它是否可能。

无论如何，这里是我当前的大嘴任务

$ b

  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中调试时，我的应用程序的入口点： 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'文件

我的tsconfig.json，它通过 $。typescript.createProject（） code

$ $ $ $ $ $ b $编译器选项：{
module：commonjs ，
noImplicitAny：true，
removeComments：true，
preserveConstEnums：true，
target：ES6，
sourceMap ：true，
outDir：build / server
}
}


.babelrc

  {
预设：[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 - No 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

  {
历史：[/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：{
...：...
} 
} 
  

N注意 sourceMap.sources 现在不正确地显示 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：{$ b $sources：[two.ts]，
file：two.js
 }，
babel：{
...：...
} 
} 
  

解决方案

更新

看起来这个问题中的具体问题与Babel对不在工作目录中的文件生成不正确的源映射图相关。现在此处存在一个问题。

对于乙烯基File对象，如

 新文件（{
 cwd：'。'， 
 base：'./test/'，
 path：'./test/some/file.js'
 ... 
}）; 
  

生成的源图应该有类似的内容

  {
 ... 
sources：[some / file.js] 
 ... 
} 
  

但 gulp-babel 给出

  {
 ... 
sources：[file.js] 
 ... 
 
 $ / code> 

这会导致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'））; 
}）; 
  

---

上一个回答

您近了，但在您的配置中发现了一些错误：

1. module：commonjs与target：es6不兼容。使用Typescript输出ES6模块并让Babel将它们转换为CommonJS。
使用Gulp后，因为您正在工作，所以不需要

2. outDir与流。中级结果（即Typescript的结果）根本不写入磁盘。
   
3. sourceMap：true Gulp sourcemaps 。

我已经创建了一个为我编译的项目， babel@6.1.18和typescript@1.6.2。

目录结构

 。 
├──gulpfile.js 
└──src 
└──服务器
├──one.ts 
└──two.ts 
  

one.ts

  export class One {}; 
  

two.ts

 从'./one'导入{One}; 
 
导出类二延伸一{} 
  

gulpfile.js

我已经内联了所有的简洁配置，但您应该可以轻松地使用配置文件。

  var gulp = require（'gulp'）; 
 
 var sourcemaps = require（'gulp-sourcemaps'）; 
 var typescript = require（'gulp-typescript'）; 
 var babel = require（'gulp-babel'）; 
 $ b $ gulp.task（'build'，function（）{
 return gulp.src（'src / server / ** / *。ts'）
 .pipe（sourcemaps .init（））
 .pipe（typescript（{
 noImplicitAny：true，
 removeComments：true，
 preserveConstEnums：true，
 target：'es6'
 $ b。））
 .pipe（sourcemaps.write（'。'，{sourceRoot（$ {
}））{
 presets：['es2015'] 
} ：'src / server'}））
 .pipe（gulp.dest（'build / server'））; 
}）; 
  

I am currently writing a side project where I can learn more about TypeScript and ES6 (using babel).

I wanted to use ES6 with my TypeScript, so I settled on the following workflow.

Typescript (ES6) -> Babel (ES6) -> ES5

Now I am using Gulp to automate all of this, and I am having a hard time getting the sourcemaps to generate properly. I should mention that this style was suggested to me by a user on /r/typescript so I am not even sure if it is possible.

Anyways here is my current gulp 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'));
});

I have tried many different approaches, but none work. When debugging in VSCode, the entrypoint of my app: build/server/index.js loads and finds the source file src/server/index.ts properly.

However when VSCode attempts to step into another file say build/server/utils/logger/index.js it looks for src/server/utils/logger/index.js which it doesn't find because it should be looking for a *.ts file.

So what am I doing wrong? Or is this even possible? I've been staring at this for about 5 hours now. So any insight would be great.

Also VSCode 0.9.x displays the '.../.js' file not found and VSCode 1.0 just fails silently.

my tsconfig.json, it gets passed in by $.typescript.createProject()

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "target": "ES6",
    "sourceMap": true,
    "outDir": "build/server"
  }
}

.babelrc

{
  "presets": ["es2015"]
}

Here is the relevant npm packages

"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"
}

Edit: I have done some investigating into the gulp-sourcemaps, and when not using babel the sourcemaps work properly. (Removed all irrelevant info)

src/server/up/up2/four.ts - No 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"
  }
}

Notice how in sourceMap.sources it lists the proper source file up/up2/four.ts

Now here is an example when I add gulp-babel into the task.

src/server/up/up2/four.ts - With 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": {
    "...": "..."
  }
}

Notice how the sourceMap.sources now incorrectly shows the four.js instead of the typescript file.

Curiously enough, as long as the typescript files are in the root directory src/server they build the source maps just fine.

src/server/two.ts - With 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": {
    "...": "..."
  }
}

解决方案

Update

It appears that the specific issue in this question is related to Babel's incorrect source map generation for files which are not in the working directory. There is already an issue filed here.

For a vinyl File object like

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

the generated source map should have something like

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

but gulp-babel gives

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

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.

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

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'));
});

---

Previous Answer

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

1. "module": "commonjs" is incompatible with "target": "es6". Output ES6 modules with Typescript and let Babel transpile them to CommonJS.
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.
3. "sourceMap": true is not necessary together with Gulp sourcemaps.

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

Directory structure

.
├── 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

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

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和Babel的Gulp源地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！