久草青青,亚洲激情第一页,国产色99精品9i

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

問題描述

限時送ChatGPT賬號..

我目前正在編寫一個輔助項目，在那里我可以了解有關 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

現在我正在使用 Gulp 自動執行所有這些操作，但我很難正確生成源映射.我應該提到這種風格是由/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 中調試時，我的應用程序的入口點: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.

那我做錯了什么?或者這甚至可能嗎?我已經盯著這個大約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"]
}

這里是相關的 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"
}

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

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

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

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

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

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

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:

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

我創建了一個為我編譯的項目，使用 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.

目錄結構

.
├── 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

為了簡潔起見，我已經內聯了所有配置，但是您應該能夠同樣輕松地使用配置文件.

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

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

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

久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

使用 TypeScript 和 Babel 的 Gulp 源圖

問題描述

推薦答案

更新

上一個答案

Previous Answer

相關文檔推薦