Typescript: 방출은 빈 줄을 유지하지 않습니다.

배경 정보 추가 ... 새 컴파일러가 모든 빈 줄을 제거하는 이유는 이것이 우리가 _consistently_ 할 수있는 유일한 작업이기 때문입니다. 빈 줄 보존은 예를 들어 클래스 및 모듈 선언과 같이 재 작성이 필요한 구성에 관해서는 항상 히트 또는 미스 일이 될 것입니다. 댓글 보존과 똑같은 문제에 직면합니다. 그래서 제가이 문제를 해결하는 데 동정심을 느끼지만 쉬운 일은 아닙니다.

@NoelAbrahams 디버깅 할 때 어떤 문제가 발생하는지 궁금합니다.

@ahejlsberg @NoelAbrahams 저는 원래 CodePlex 프로젝트에서 내 보낸 프로토 타입을 만들었는데 실제로 주석과 줄 바꿈 보존으로 훌륭한 작업을 수행했습니다. 크게 재 작성된 구조 (예 : 함수 표현식에 대한 화살표 함수)에서도 거의 항상 직관적으로 예상했던 작업을 수행합니다.

줄 보존은 대부분 이전 코드를 보존 할 때 줄 바꿈을 재사용하고 변환을 수행 할 때 상대 간격을 사용하는 기능입니다. 즉, 다음이있는 경우 :

module M {
}
module N {
}

그런 다음 'N'에 대한 IIFE를 내보낼 때 "우리가 다시 작성하는 모듈과 이전 구문 요소 사이에 퀴즈를 유지해야합니다"라고 말합니다.

다음은 높은 수준의 충실도로 주석 / 개행을 보존하는 이미 터 프로토 타입이 어떻게 작동했는지에 대한 이전 / 이후입니다.

https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter2/ecmascript5/Parser.ts
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter2/ecmascript5/Parser.ts.expected

여기에서도 많은 예를 볼 수 있습니다.
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/

내가 구현하지 않은 유일한 기능은 '정렬'이었습니다. 즉, 원본에서 어떤 방식 으로든 정렬 된 코드가있는 경우 (매개 변수 선언에서 매우 일반적) 내 보낸 코드도이를 보존하기를 원합니다.

그러나 그렇게하는 것은 매우 사소한 일이었습니다.

즉, TS에서 JS 로의 컨스 트럭 트 변환은 들여 쓰기를 보존하려고했습니다. 여기에서 확인할 수 있습니다.
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/ClassDeclaration/ClassDeclaration2.ts
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/ClassDeclaration/ClassDeclaration2.ts.expected

중첩 된 모듈과 클래스를 IIFE로 변환 한 후에도 문이 어떻게 적절하게 들여 쓰기되는지 (여러 줄에 걸쳐있는 경우에도) 유의하십시오.

@ahejlsberg , 브라우저에서 디버깅 할 때 중요한 문제가 없습니다. 실제 TypeScript 소스 코드와 정확히 일치하는 경우 JavaScript 코드를 탐색하고 중단 점을 설정하기위한 줄을 찾는 것이 더 쉬워집니다.

저는 개인적으로 빈 줄없이 살 수 있었지만 TS는 _beautiful _ JavaScript (: smile :)를 보존하고 방출하기 위해 그렇게

@ahejlsberg @NoelAbrahams 이 대화와 약간 관련된 브라우저의 디버깅에 존재하는 한 가지 문제가 있습니다. setter / getter 체인 (예 : jquery) 또는 체인 약속을 사용할 때 새 줄 바꿈은 번역 중에 손실됩니다. 즉, Arrow 기능으로 작업 할 때 큰 고통 포인트입니다.

예로서:

(<any> x).a('#test')
    .b('test')
    .c(() => 'foo')
    .d(() => 'bar')
    .e(() => 5)
    .f(() => 6);

된다 :

x.a('#test').b('test').c(function () { return 'foo'; }).d(function () { return 'bar'; }).e(function () { return 5; }).f(function () { return 6; });

Chrome 및 sourceMaps를 사용하면 중단 점을 계속 건너 뜁니다.

http://www.typescriptlang.org/Playground#src = (% 3Cany % 3E % 20x) .a ( '% 23test') % 0A % 20 % 20 % 20 % 20.b ( 'test') % 0A % 09.c (() % 20 % 3D % 3E % 20'foo ') % 0A % 09.d (() % 20 % 3D % 3E % 20'bar') % 0A % 09.e (() % 20 % 3D % 3E % 205) % 0A % 09.f (() % 20 % 3D % 3E % 206) % 3B

@mtraynham , 실제로 강조하는 문제는 약간 다른 문제라고 생각합니다.

이전 버전에서 인라인 함수의 본문은 항상 새 줄에서 내보냈습니다.

// TS
var x = () => 'foo';

// JS - old
var x = function () { 
             return 'foo'; 
       };

// JS - new
var x = function () { return 'foo'; };

나도 이것이 문제라는 것을 발견했다. 브라우저에서 디버깅 할 때 중단 점을 설정할 수 있도록 가끔 돌아가서 function 만들어야합니다.

@NoelAbrahams Ahh 예, 똑같은 임시 솔루션을 사용하고 있습니다 ...

나는 별도의 문제에 # 2259를 만들었습니다.

우리의 자바 스크립트 개발 커뮤니티를 타이프 ​​스크립트로 옮기는 것을 탐구하는 엔지니어링 디렉터로서 새로운 라인 기능이 정말 도움이 될 것입니다. typescript의 주요 매력 중 하나는 typescript generatedJavascript에서 생성 된 코드의 가독성과 구조를 유지하는 것입니다.

최근 업데이트 및 "--removeComments"명령 줄 지시문 추가에 주석이 유지되는 것을 볼 수 있습니다.

나는 또한 @timjmartel 과 비슷한 이유로 이것을 좋아합니다. 개발자가 내 보낸 JS가 _nice_ 보이면 채택에 대한 저항이 적습니다. (적어도 수직적 인) 공백을 보존하면 코드가 기계에 의해 생성 된 것보다 덜 인간이 작성한 idomatic JS 코드와 비슷해 보입니다.

우리 팀이 TS를 버리고 대신 트랜스 파일 된 JS를 계속 사용하기로 결정했다면 인간 친화적 인 공백이 있다면 방출 된 JS 소스를 채택하는 것이 훨씬 쉬울 것입니다.

빈 줄과 관련하여, 지금 당장은 히트하거나 놓치더라도 방출 할 수 있습니까? 이러한 실험적 기능은 "--keepEmptyLines"옵션을 사용하여 요청할 수 있습니다. 좋은 JS를 사용하는 것이 아니라 더 읽기 쉬운 JS를 사용하기위한 것입니다.

연결 함수 호출과 관련하여 사용자가 중단 점을 설정할 수 있도록 한 줄에 대한 호출을 할 수 있습니까? 다시 말하지만,이 기능은 다른 "적중 또는 실패"항목 인 경우 "--oneCallForLine"옵션과 함께 요청할 수 있습니다.

주목 해 주셔서 감사합니다.

실제로 연결된 함수 호출은 소스 코드 미화 자에 의해 분할 될 수 있으므로 이러한 기능을 TypeScript에 포함하는 것은 의미가 없습니다.

이것은 그렇게 어렵지 않아야합니다. tsconfig.json에 옵션 만 있으면 안됩니다.

preserveWhitespace: true/false

?

그러나 나는 이것을 컴파일러 옵션으로 보지 않고 있습니다 : https://www.typescriptlang.org/docs/handbook/compiler-options.html

나는 곧 깨달았다. 공백을 유지하지 않는 한 가지 좋은 이유는 실수로 .ts 대신 .js를 편집하는 것을 방지하는 데 도움이되기 때문입니다. 한 가지해야 할 일은 .js 파일을 읽기 전용 / 실행 전용으로 작성하는 것입니다. 따라서 이것은 문제가되지 않을 수도 있습니다.

즉, tsc가 .js 파일을 읽기 전용 / 실행 전용으로 작성한다고 생각하지 않습니다.이를 수행하도록 tsc를 구성하는 방법이 있습니까?

아니요, 지금은 아닙니다. 그래도 별도의 문제를 열어보십시오.

@DanielRosenwasser 우리가 별도의 문제를 열어야하는 공백을 보존하고 싶다면 당신은 말하고 있습니까? 이 문제가 충분하지 않습니까? LOL을 한 달 이상 신경 쓰지 마십시오. 트랜스 파일 된 파일에 대한 읽기 / 쓰기 / 실행 권한에 대해 별도의 문제를 열라는 것을 알고 있습니다. :)

이것을 가지고 있으면 좋을 것입니다.

+1

+1

+1

군중은 preserveWhitespace: true/false 원합니다
@ORESoftware ++

이것이 중요한 이유는 TypeScript가 JS로 "정상적으로 저하"되어야하기 때문입니다. 지금은 새 줄을 보존 할 수 없으므로 특히 TypeScript를 작성하는 경우 JS를 읽기에 약간 조밀하게 만들 수 있지만 JS를 다른 곳으로 전달해야합니다.

+1 preserveWhitespace: true/false

임시 해킹

esformatter 를 사용하여

다음 구성 파일 사용 :

{
  "lineBreak": {
    "before": {
      "FunctionDeclaration": ">=2",
      "FunctionDeclarationOpeningBrace": 0,
      "FunctionDeclarationClosingBrace": 1,
      "MethodDefinition": ">=2",
      "ClassDeclaration": ">=2"
    },
    "after": {
      "FunctionDeclaration": ">=2",
      "FunctionDeclarationOpeningBrace": 1,
      "MethodDefinitionClosingBrace": ">=2",
      "ClassClosingBrace": ">=2"
    }
  }
}

@mtraynham 귀하의 예 :

(<any> x).a('#test')
    .b('test')
    .c(() => 'foo')
    .d(() => 'bar')
    .e(() => 5)
    .f(() => 6);

최신 컴파일러로 다음 JS를 생성합니다.

x.a('#test')
    .b('test')
    .c(function () { return 'foo'; })
    .d(function () { return 'bar'; })
    .e(function () { return 5; })
    .f(function () { return 6; });

(TS PlayGround https://goo.gl/JViurr 참조)

TS 버전 1.1 (이 문제가 발생한 TypeScript 버전) 이후로 많은 것이 변경되었습니다. 이 문제를 해결할 수 있습니까? 트윗 담아 가기

@ valera-rozuvan 대신 # 2259를 열었습니다. 내 문제는 줄 바꿈과 관련이 있지만이 버그에서 설명한 것과 똑같은 문제는 아닙니다. # 2259는 잠시 동안 닫혔습니다 (2015 년 5 월).

이것은 bril-andrew esformatter 구성이지만 버그가 수정되었습니다 (클래스 선언에 단어 import가 포함 된 경우 줄 바꿈이 없음).

{
    "lineBreak": {
        "before": {
            "FunctionDeclaration": ">=2",
            "FunctionDeclarationOpeningBrace": 0,
            "FunctionDeclarationClosingBrace": 1,
            "MethodDefinition": ">=2",
            "ClassDeclaration": ">=2",
            "ExportNamedDeclaration": 2
        },
        "after": {
            "FunctionDeclaration": ">=2",
            "FunctionDeclarationOpeningBrace": 1,
            "MethodDefinitionClosingBrace": ">=2",
            "ClassClosingBrace": ">=2"
        }
    }
}

esformatter를 사용하면 전체 문제가 해결되지 않는다고 생각합니다. 물론 함수 주위에 빈 줄을 자동으로 삽입 할 수 있습니다.하지만 저에게는 함수 내의 빈 줄이 훨씬 더 중요합니다. 우리는 산문에서 문단과 같은 빈 줄을 사용하여 개별 생각을 그룹화합니다.

함수 내의 빈 줄은 함수의 구조를 전달하는 데 도움이됩니다. 그것들이 없으면 가독성이 떨어집니다.

@ahejlsberg ts- 되며이 문제는 js 출력에서 ​​빈 줄이 제거되어 발생한 것으로 보입니다. 마지막 js에이 줄을 남기는 것이 왜 그렇게 어려운지 궁금합니다. 이것에 대한 더 많은 정보가 있습니까? 이런 일이 일어나도록 어떻게 도와 드릴까요? :)

아니면 이미 병합되었고 아직 출시되지 않았습니까? -> V4 Next Big 버전 # 3143

@JimTheMan 소스 맵을 사용하는 경우 source-map-support 패키지 가 출력에서 ​​올바른 스택 추적을 얻는 데 도움이 될 수 있습니다.

나는 또한이 문제에 부딪쳤다. diff 패치를 만들고 패치의 공백 변경 사항을 되돌림으로써 해결 방법을 찾았습니다. jsdiff를 사용하면 구조화 된 패치 객체를 만들고 원하는대로 조작 할 수 있습니다.

import * as diff from 'diff';

const patch =
      diff.parsePatch(diff.createPatch('file', oldText, newText, '', ''));
const hunks = patch[0].hunks;
for (let i = 0; i < hunks.length; ++i) {
  let lineOffset = 0;
  const hunk = hunks[i];
  hunk.lines = hunk.lines.map(line => {
    if (line === '-') {
      lineOffset++;
      return ' ';
    }
    return line;
  });
  hunk.newLines += lineOffset;
  for (let j = i + 1; j < hunks.length; ++j) {
    hunks[j].newStart += lineOffset;
  }
}
return diff.applyPatch(oldText, patch);

이 해결 방법을 사용하면 원본 파일의 모든 줄 바꿈을 유지할 수 있습니다.

@zeroliu 컴파일 단계에서 눈에 띄는 시간 지연이 발생합니까?

@ahejlsberg 이 문제를 해결할 가치가 있다고 생각하십니까?

프로젝트의 크기에 따라 @ valera-rozuvan. 100-1000 LOC의 10 개 파일을 트랜스 파일하는 사용 사례의 경우 눈에 띄는 지연이 발생하지 않습니다.

아직 해결책이 없나요? 나도이 곤경에 처해 ...

내 팀 동료 @emadum 이 tsc가 주석을 보존 할 수 있다는 것을 상기시켜

const gulp = require('gulp');
const ts = require('gulp-typescript');
const through = require('through2');

function preserveNewlines() {
  return through.obj(function(file, encoding, callback) {
    const data = file.contents.toString('utf8');
    const fixedUp = data.replace(/\n\n/g, '\n/** THIS_IS_A_NEWLINE **/');
    file.contents = Buffer.from(fixedUp, 'utf8');
    callback(null, file);
  });
}

function restoreNewlines() {
  return through.obj(function(file, encoding, callback) {
    const data = file.contents.toString('utf8');
    const fixedUp = data.replace(/\/\*\* THIS_IS_A_NEWLINE \*\*\//g, '\n');
    file.contents = Buffer.from(fixedUp, 'utf8');
    callback(null, file);
  });
}

gulp.task('default', function () {
  return gulp.src('src/**/*.ts')
    .pipe(preserveNewlines())
    .pipe(ts({
      removeComments: false
    }))
    .pipe(restoreNewlines())
    .pipe(gulp.dest('lib'));
});

좀 더 현명한 댓글이 오탐을 막을 수 있다고 생각하지만 오늘날 우리에게는 잘 작동하는 것 같습니다. 비교적 작은 파일에서만 테스트했지만 성능 오버 헤드는 최소화되었습니다.

hth

뿡뿡

나는 결국 당신의 아이디어를 기반으로 사용하고 결국 npm 모듈이 될 때까지 확장했습니다.
https://www.npmjs.com/package/gulp-preserve-typescript-whitespace

Readme에 귀하의 게시물을 올렸습니다.