Rollup-plugin-typescript2: 인터페이스 선언이 제거된 이유는 무엇입니까?

이것은 런타임 오류입니까, 아니면 typescript 오류입니까? RenderedCell 자체에서 인터페이스를 내보내는 방법을 게시할 수 있습니까?

문제는 파일이 전혀 생성되지 않고 다른 프로젝트에서 라이브러리를 사용할 때 실패한다는 것입니다.

잠깐, RenderedCell 인터페이스가 생성될 것으로 예상하십니까? typescript를 게시한 코드에서 RenderedCell.ts 라는 파일이 현재 파일 위의 한 디렉토리에 존재할 것으로 예상하고 다음과 같은 내용을 포함해야 합니다.

export interface RenderedCell 
{ 
    // ...
}

프로젝트 구조에 대해 더 자세히 설명해 주시겠습니까? (파일 트리, tsconfig, 롤업 구성 등)

예, 생성되기를 기대합니다.

내 구성은 다음과 같습니다.

빌드 실행: rollup -c -f es -n sq-web-component-table -o dist/sq-web-component-table.es.min.js

꽤 큰 라이브러리이고 신호보다 노이즈가 많기 때문에 전체 트리를 넣지 않았습니다. 그러나 이미 dist에 생성되지 않은 파일이 많다는 것을 알 수 있습니다.

import typescript from 'rollup-plugin-typescript2';
import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-es';

export default {
    entry: './src/index.ts',
    dest: 'dist/sq-web-component-table.min.js',
    sourceMap: true,

    plugins: [
        typescript(),
        uglify({}, minify)
    ]
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "outDir": "dist"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "dist",
    "node_modules",
    "**/*-test.ts"
  ]
}

import {RenderedElement} from "./RenderedElement";
import {RenderedRow} from "./RenderedRow";
export interface RenderedCell extends RenderedElement {
    isMergedCell(): boolean;
    getColspan(): number;
    setColspan(colspan: number): void;
    getParent(): RenderedRow;
}

.
├── src
│   ├── index.ts
│   └── table
│       ├── extensions
│       │   ├── base
│       │   │   ├── FirstTableExtension.ts
│       │   │   ├── LastTableExtension.ts
│       │   │   ├── SectionDispatcher.ts
│       │   │   ├── SectionManager.ts
│       │   │   └── SizeChangeMonitor.ts
│       │   ├── InvalidateEvent.ts
│       │   ├── InvalidateSizesEvent.ts
│       │   ├── RenderedCell.ts
│       │   ├── RenderedElement.ts
│       │   ├── RenderedRow.ts
│       │   ├── RenderedSection.ts
│       │   ├── RenderedTable.ts
│       │   ├── SectionClickedEvent.ts
│       │   ├── support
│       │   │   └── ...
│       │   ├── TableAttributes.ts
│       │   ├── TableExtensionChain.ts
│       │   ├── TableExtensionList.ts
│       │   └── TableExtension.ts
│       ├── model
│       │   └── ...
│       ├── TableRenderingOptions.ts
│       ├── Table.ts
│       ├── util
│       │   └── ...
│       └── view
│           └── ...
├── dist
│   ├── index.d.ts
│   ├── sq-web-component-table.es.min.js
│   ├── sq-web-component-table.es.min.js.map
│   ├── sq-web-component-table.min.js
│   ├── sq-web-component-table.min.js.map
│   └── table
│       ├── extensions
│       │   ├── base
│       │   │   ├── FirstTableExtension.d.ts
│       │   │   ├── LastTableExtension.d.ts
│       │   │   ├── SectionDispatcher.d.ts
│       │   │   ├── SectionManager.d.ts
│       │   │   └── SizeChangeMonitor.d.ts
│       │   ├── InvalidateEvent.d.ts
│       │   ├── InvalidateSizesEvent.d.ts
│       │   ├── RenderedRow.d.ts
│       │   ├── SectionClickedEvent.d.ts
│       │   ├── support
│       │   │   └── ...
│       │   ├── TableAttributes.d.ts
│       │   └── TableExtensionList.d.ts
│       ├── model
│       │   └── ...
│       ├── Table.d.ts
│       ├── util
│       │   └── ...
│       └── view
│           └── ...
├── node_modules
│   └── ...
├── __tests__
│   └── ...
├── package.json
├── rollup.config.js
└── tsconfig.json

아, 알겠습니다. 혹시 lib가 오픈 소스입니까?

다음 옵션으로 빌드해 보세요.

typescript({ verbosity: 2, clean: true }),

예상한 모든 파일이 처리되고 있는지 확인하십시오. 선언이 갑자기 생성되기 시작하면 어딘가에 캐시 문제가 있는 것입니다.

RenderedCell.ts가 출력( rpt2: transpiling '...' )에 언급되지 않은 경우 상세도를 3으로 늘리고 가져오기로 되어 있는 파일이 그렇게 하고 있는지 확인합니다. 당신은 다음과 같은 것을보아야합니다

rpt2: resolving '../RenderedCell'
rpt2:     to '...'

문제가 명확하지 않은 경우 어딘가에 로깅을 더 추가하겠습니다.

하고 싶습니다. 아마도 미래에 있을 것입니다 :)

트릭 감사합니다. 월요일에 시도해 보겠습니다.

tsconfig의 compilerOptions 섹션에서 declaration: false 를 설정하고 다시 컴파일하면 문제가 해결됩니까? 그렇다면 TSC에서 보고한 오류가 dist 디렉토리 내의 파일 중 하나와 관련되어 있습니까? 둘 다 예라고 답한 경우 간단한 함수 내보내기와 같이 RenderedCell 파일이 포함된 파일에 유형이 아닌 논리를 도입하면 오류가 사라집니까? 그렇다면 그 이유는 RenderedCell 가 포함된 파일이 사용되지 않은 것으로 간주되고 Typescript가 이에 대한 선언을 준비하지 않기 때문입니다.

이 모든 것이 귀하에게 적용되는 경우 2가지 옵션이 표시됩니다.

• 번들에 대한 선언 생성을 중지합니다.
• 유형과 관련이 없는 파일에 변경 사항을 도입하여 롤업이 파일을 완전히 흔들지 않도록 합니다. 예, 해킹입니다. 더 나은 방법을 찾길 바랍니다.

안녕,

오랜 지연에 대해 죄송합니다. 귀하의 팁과 트릭을 시도했지만 여전히 생성된 인터페이스에 대한 유형 정의를 얻을 수 없습니다.

구성을 typescript({ verbosity: 3, clean: true }) .
생성된 빌드의 출력에는 RenderedCell 인터페이스에 대한 언급이 없습니다.

라이브러리의 index.d.ts 가 직접 필요하고 인터페이스를 제외한 모든 파일이 생성되지만 인터페이스는 여전히 index.d.ts 의 가져오기에 있으므로 이 파일이 필요하다고 100% 확신합니다. 파일.

해당 파일이 생성되지 않는 특별한 이유가 있는지 알아보기 위해 코드를 자세히 살펴보겠습니다.

@wessberg 내 번들에 대한 선언 생성 중지는 TypeScript로 작성된 더 큰 프로젝트의 일부인 라이브러리이므로 옵션이 아닙니다. 따라서 타이핑이 없으면 작동하지 않습니다.

그래서 몇 가지 조사를 하고 최소한의 구성 세트로 제 사례를 재현하는 리포지토리를 만들었습니다. https://github.com/onigoetz/typescript-rollup-experiment

또한 웹팩이 작동하는 방식을 비교하기 위해 웹팩 구성을 포함했습니다.

문제에 대한 나의 이해는 rollup-plugin-typescript2가 파일의 컴파일된 버전을 요구할 때(index.ts라고 하자) Typescript는 컴파일된 파일과 가져오기를 반환하지만 가져오기에 인터페이스가 없다는 것입니다.

이것이 롤업이 생성하지 않는 이유입니다. 롤업은 존재를 인식하지 못합니다.

저장소를 실행하려면 디렉토리 내에서 npm install && npm run build 를 수행하십시오.

추가하는 경우:
import "./SomeInterface"; index.ts 파일에 import "./SomeInterface"; (정확히 그와 같이 - 명명된 바인딩 없이)를 추가하면 작동해야 합니다. 합니까?

불행히도, 롤업은 유형 선언만 포함하는 파일과 같은 선언 전용 파일에 대한 플러그인의 변환 핸들러를 호출하지 않습니다. 위의 작업은 Rollup이 파일을 평가하도록 하기 때문에 작동해야 합니다. 이 문제: https://github.com/rollup/rollup-plugin-typescript/issues/28에서 이 문제가 발생하는 방법과 이유를 설명합니다. 이론적으로 진입점에서 애플리케이션의 모든 종속성을 수동으로 해결하고 유형 선언만 포함하는 종속성을 결정할 수 있지만 롤업이 변환 후크를 호출하도록 강제할 방법은 없습니다(많은 추가 빌드 단계 복잡성과 같은 다른 명백한 단점 제외). ).

롤업 자체를 변경하지 않고는 이에 대해 많은 작업을 수행할 수 없습니다. 지금 은 내가 설명한 "해킹" 해야 합니다.

네, 방금 확인했습니다. 테스트 저장소에 import "./SomeInterface"; 를 추가하면 문제가 해결됩니다.

유형만 가져올 때 typescript는 js 출력에서 ​​import 문을 생략하고 롤업은 해당 파일을 보지 않으므로 트랜스파일을 위해 보내지 않습니다.

디스크에서 요청한 파일 유형 대 트랜스파일을 위해 보낸 파일 롤업을 속이고 모니터링하려고 합니다. 정의 전용 플래그를 사용하여 차이점을 강제 변환할 수 있어야 합니다. 이로 인해 어떤 경우에는 너무 많은 d.t 파일이 생성될 수 있습니다(예를 들어 롤업이 트리에서 합법적으로 흔들린 경우).

조사해 주셔서 감사합니다. 이에 대해 기여할 수 있는지도 확인하겠습니다.

@onigoetz , 좋아, 마스터와 함께 프로젝트를 시도하십시오. 올바른 선언이 생성되었는지 확인하되 예기치 않은 선언이 없는지 확인하세요. :)

굉장합니다, 당신은 내가 자고있는 동안 그것을 완전히 고쳤습니다 :)

나는 그것을 테스트했고 거의 잘 작동합니다.

약간의 문제가 있지만 우리가 할 수 있는 일이라고 생각합니다. 웹팩 로더가 정확히 동일한 작업을 수행하고 파일 목록은 TypeScript 자체에서 생성됩니다.

예로서; 내 저장소에 세 개의 파일이 있는 경우:

• index.ts 수입 SomeInterface.ts
• SomeInterface.ts
• nongenerated.ts 수입 SomeInterface.ts

nongenerated.ts 는 참조되지 않지만 해당 유형은 어쨌든 생성됩니다.

멋진, 테스트 주셔서 감사합니다. 조금 있다가 다른 문제가 확인되면 공개하겠습니다.

네, 롤업을 우회할 때 우리가 할 수 있는 일은 많지 않습니다. exclude 옵션에서 해당 파일을 수동으로 제외할 수 있어야 하지만 이는 좋지 않은 해결 방법입니다.

좋아, 지금 0.5.1에서

잘 작동합니다. tsconfig.json을 구성하십시오.

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es5",
        "declaration":true,
        "declarationDir": "lib",
        "typeRoots": [
            "node_modules/@six006",
            "node_modules/@types"
        ],
        "lib": [
            "es2015",
            "es2017",
            "es5"
        ],
    },
    "include": [
        "src/index.ts",
        "src/module/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

include 섹션에서 생성할 항목을 알려줍니다.

YMMV 하지만 이렇게 작동하도록 했습니다 ...

~ 전에

export type MyType = { ... };

~ 후에

type MyType = { ... };

export { MyType }

그만한 가치가 있기 때문에 롤업 후에 tsc --emitDeclarationOnly 호출하면 선언 파일을 빌드 폴더로 재정의합니다.
내 package.json에서

"scripts": {
    "build": "rollup -c",
    "postbuild: "tsc --emitDeclarationOnly"
}