日干夜干,激情综合五月婷婷,狠狠爱夜夜

本文介紹了使用 TypeScript 和 Babel 的 Gulp 源圖的處理方法，對大家解決問題具有一定的參考價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！

問題描述

限時(shí)送ChatGPT賬號(hào)..

我目前正在編寫一個(gè)輔助項(xiàng)目，在那里我可以了解有關(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 自動(dòng)執(zhí)行所有這些操作，但我很難正確生成源映射.我應(yīng)該提到這種風(fēng)格是由/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.

無論如何，這是我當(dāng)前的 gulp 任務(wù)

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)試時(shí)，我的應(yīng)用程序的入口點(diǎn):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.

但是，當(dāng) VSCode 嘗試進(jìn)入另一個(gè)文件說 build/server/utils/logger/index.js 時(shí)，它會(huì)尋找 src/server/utils/logger/index.js 它沒有找到，因?yàn)樗鼞?yīng)該在尋找 *.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.

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

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 進(jìn)行了一些調(diào)查，當(dāng)不使用 babel 時(shí)，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 添加到任務(wù)中的示例.

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)在如何錯(cuò)誤地顯示 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": {
    "...": "..."
  }
}

更新

看來這個(gè)問題中的具體問題與 Babel 為不在工作目錄中的文件生成不正確的源映射有關(guān).這里已經(jīng)提交了一個(gè)問題.

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

For a vinyl File object like

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

生成的源地圖應(yīng)該有類似

the generated source map should have something like

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

但是 gulp-babel 給出了

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

這會(huì)導(dǎo)致 Typescript 源映射和 Babel 源映射被錯(cuò)誤地合并，但僅當(dāng)文件比工作目錄更深時(shí).

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.

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

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

<小時(shí)>

上一個(gè)答案

您很接近，但我注意到您的配置中有幾個(gè)錯(cuò)誤:

Previous Answer

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

"module": "commonjs" 與 "target": "es6" 不兼容.使用 Typescript 輸出 ES6 模塊，然后讓 Babel 將它們轉(zhuǎn)譯為 CommonJS.
"outDir" 在使用 Gulp 時(shí)不是必需的，因?yàn)槟谑褂昧?中間結(jié)果(即 Typescript 的結(jié)果)根本不會(huì)寫入磁盤.
"sourceMap": true 不需要與 Gulp sourcemaps 一起使用.

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

我創(chuàng)建了一個(gè)為我編譯的項(xià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 {};

兩個(gè).ts

import { One } from './one';

export class Two extends One {}

gulpfile.js

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

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)！

【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！

pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

使用 TypeScript 和 Babel 的 Gulp 源圖

問題描述

推薦答案

更新

上一個(gè)答案

Previous Answer

相關(guān)文檔推薦