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 尝试进入另一个文件时，它会说它会build/server/utils/logger/index.js寻找src/server/utils/logger/index.js它没有找到的文件，因为它应该在寻找 *.ts 文件。

那么我做错了什么？或者这甚至可能吗？我已经盯着这个大约5个小时了。所以任何见解都会很棒。

VSCode 0.9.x 也显示'.../.js' file not foundVSCode 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而不是打字稿文件。

奇怪的是，只要打字稿文件在根目录中，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"。使用 Typescript 输出 ES6 模块并让 Babel 将它们转译为 CommonJS。
  2. "outDir"使用 Gulp 时没有必要，因为您正在使用流。中间结果（即 Typescript 的结果）根本不会写入磁盘。
  3. "sourceMap": true不需要与 Gulp 一起使用sourcemaps。

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

目录结构

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

一个.ts

export class One {};

两个.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 回答