7

私は現在、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 でデバッグすると、アプリのエントリポイント:build/server/index.jsソース ファイルsrc/server/index.tsが正しく読み込まれ、検出されます。

ただし、VSCode が別のファイルにステップインしようとすると、*.ts ファイルをbuild/server/utils/logger/index.js探すsrc/server/utils/logger/index.js必要があるため、見つからないファイルを探します。

それで、私は何を間違っていますか？それともこれは可能ですか？私はこれを約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 - バベルなし

{
  "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": {
    "...": "..."
  }
}

typescript ファイル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": {
    "...": "..."
  }
}
4

1 に答える 1

3

アップデート

この質問の特定の問題は、作業ディレクトリにないファイルに対する 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'));
});

前の回答

あなたは近いですが、あなたの設定に気づいたいくつかの間違いがあります:

  1. "module": "commonjs"と互換性がありません"target": "es6"。ES6 モジュールを Typescript で出力し、Babel に CommonJS にトランスパイルさせます。
  2. "outDir"ストリームを操作しているため、Gulp を使用する場合は必要ありません。中間結果 (つまり、Typescript の結果) はディスクにまったく書き込まれません。
  3. "sourceMap": trueGulp と一緒にする必要はありません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'));
});
于 2015-11-20T04:58:04.867 に答える