javascript – 使用TypeScript和Babel的Gulp源图

我目前正在编写一个侧面项目,我可以在其中了解有关TypeScript和ES6(使用babel)的更多信息.

我想在我的TypeScript中使用ES6,所以我选择了以下工作流程.

打字稿(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’文件,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" ],"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" ],"sourceMap": {
    "sources": ["two.ts"],"file": "two.js"
  },"babel": {
    "...": "..."
  }
}

解决方法

更新

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

对于像这样的乙烯基File对象

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

上一个答案

你很接近,但我在你的配置中注意到了一些错误：

>“module”：“commonjs”与“target”不兼容：“es6”.使用Typescript输出ES6模块,让Babel将它们转换为Commonjs.
>使用Gulp时不需要“outDir”,因为您正在使用流.中间结果(即Typescript的结果)根本不写入磁盘.
>“sourceMap”：与Gulp源图一起使用true是不必要的.

我创建了一个为我编译的项目,使用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',target: 'es6'
    }))
    .pipe(babel({
      presets: [ 'es2015' ]
    }))
    .pipe(sourcemaps.write('.',{ sourceRoot: 'src/server' }))
    .pipe(gulp.dest('build/server'));
});

javascript – 使用TypeScript和Babel的Gulp源图

解决方法

相关文章