問題描述

我目前正在編寫一個輔助項目，在那里我可以了解有關(guān) TypeScript 和 ES6(使用 babel)的更多信息.

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

我想在我的 TypeScript 中使用 ES6，所以我選擇了以下工作流程.

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

Typescript (ES6) ->通天塔 (ES6) ->ES5

現(xiàn)在我正在使用 Gulp 自動執(zhí)行所有這些操作，但我很難正確生成源映射.我應該提到這種風格是由/r/typescript 上的用戶向我建議的，所以我什至不確定它是否可能.

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.

無論如何，這是我當前的 gulp 任務

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

我嘗試了許多不同的方法，但都沒有奏效.在 VSCode 中調(diào)試時，我的應用程序的入口點:build/server/index.js 正確加載并找到源文件 src/server/index.ts.

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.

但是，當 VSCode 嘗試進入另一個文件說 build/server/utils/logger/index.js 時，它會尋找 src/server/utils/logger/index.js 它沒有找到，因為它應該在尋找 *.ts 文件.

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.

那我做錯了什么?或者這甚至可能嗎?我已經(jīng)盯著這個大約5個小時了.所以任何見解都會很棒.

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.

VSCode 0.9.x 也顯示 '.../.js' file not found 并且 VSCode 1.0 只是默默地失敗.

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

我的 tsconfig.json，它是由 $.typescript.createProject()

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

這里是相關(guān)的 npm 包

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

我已經(jīng)對 gulp-sourcemaps 進行了一些調(diào)查，當不使用 babel 時，sourcemaps 可以正常工作.(刪除所有無關(guān)信息)

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 - 沒有通天塔

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

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

下面是我將 gulp-babel 添加到任務中的示例.

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

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 現(xiàn)在如何錯誤地顯示 four.js 而不是 typescript 文件.

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

奇怪的是，只要 typescript 文件位于根目錄 src/server 中，它們就可以很好地構(gòu)建源映射.

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 - 使用 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 為不在工作目錄中的文件生成不正確的源映射有關(guān).這里已經(jīng)提交了一個問題.

對于像乙烯基文件這樣的對象

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

但是 gulp-babel 給出了

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

這會導致 Typescript 源映射和 Babel 源映射被錯誤地合并，但僅當文件比工作目錄更深時.

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.

雖然這個問題正在解決，但我建議使用 Typescript 以 ES5 為目標，并完全繞過 Babel.這會生成正確的源映射.

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" 與 "target": "es6" 不兼容.使用 Typescript 輸出 ES6 模塊，然后讓 Babel 將它們轉(zhuǎn)譯為 CommonJS.
2. "outDir" 在使用 Gulp 時不是必需的，因為您正在使用流.中間結(jié)果(即 Typescript 的結(jié)果)根本不會寫入磁盤.
3. "sourceMap": true 不需要與 Gulp sourcemaps 一起使用.

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.

我創(chuàng)建了一個為我編譯的項目，使用 babel@6.1.18 和 typescript@1.6.2.

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

目錄結(jié)構(gòu)

.
├── gulpfile.js
└── src
    └── server
        ├── one.ts
        └── two.ts

one.ts

export class One {};

兩個.ts

import { One } from './one';

export class Two extends One {}

gulpfile.js

為了簡潔起見，我已經(jīng)內(nèi)聯(lián)了所有配置，但是您應該能夠同樣輕松地使用配置文件.

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

這篇關(guān)于使用 TypeScript 和 Babel 的 Gulp 源圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！