Rollup-plugin-typescript2: '입력' 롤업으로 개체 내의 잘못된 폴더에 생성된 입력 파일

useTsconfigDeclarationDir 플러그인 옵션은 현재로서는 해결 방법입니다.

이것은 0.20.0에서 릴리스된 #142로 수정될 수 있습니다.

안녕하세요 @ezolenkom & @jakearchibald , 둘 다 실제로 운이 없습니다.

내 롤업 플러그인에 useTsconfigDeclarationDir 옵션을 추가하면 선언 파일이 더 이상 생성되지 않습니다. 불행히도 0.20.1로 업데이트해도 차이가 없었습니다.

@benkeen useTsconfigDeclarationDir: true 플러그인 옵션을 사용할 때 tsconfig.json declarationDir 값도 있어야 합니다.

비슷한 문제가 있습니다. 내 프로젝트 레이아웃은 다음과 같습니다.

export default [ 
  {
    input: 'src/subFolder1/one.ts,
    output: [
                    {
                      file: 'dist/one.js'
                      .....                      
                     }
    ],
    plugins: [
           typescript({
                typescript: require('typescript'),
            }),
    ]
  },
      input: 'src/subFolder2/two.ts,
      output: [
                    {
                      file: 'dist/two.js'
                      .....                      
                     }
    ],
     ...
  },
]

나는 출력으로 :

  |---subFolder1
  |          |--------one.d.ts
  |
  |---subFolder2
  |          |---------two.d.ts
  |-----one.js
  |-----two.js

useTsconfigDeclarationDir: false 를 사용하여 0.20.1에서 작동합니다. -- d.ts 파일은 output.[].dir 지정된 폴더로 이동합니다. @benkeen 다시 시도해 주시겠습니까?

@AntonPilyak 의도적 인 것입니다. d.ts가 하위 경로없이 한 폴더로 이동하는 경우 subFolder1/one.ts 및 subFolder2/one.ts 가 있으면 그 중 하나가 다른 폴더를 덮어쓰게 됩니다.

@ezolenko : 이 기능은 실제 문제를 해결하기보다 더 많은 불편을 초래한다고 생각합니다(모든 디렉토리 구조를 유지하기 어렵기 때문에). 이러한 모든 유형 선언을 번들의 루트에 복사하는 스크립트를 만들고 포함하기 쉬운 번들을 생성하기 위해 디렉토리를 .npmignore에 추가해야 합니다. 동일한 이름을 가진 유형 파일에 대해서만 이러한 추가 디렉토리를 생성하는 것이 좋습니다. 그리고 나머지는 rollup.config.json의 '출력' 섹션에 정의된 디렉토리를 사용하세요.

@AntonPilyak useTsconfigDeclarationDir: true 옵션을 사용하고 tsconfig에서 declarationDir 를 설정할 수 있습니다. 이렇게 하면 typescript 자체에서 입력 출력 경로를 처리할 수 있습니다.

경로의 고유성을 기반으로 하위 디렉터리를 사용해야 하는지 결정하는 것은 진화하는 프로젝트에서 악몽이 될 것입니다. 다른 폴더에 같은 이름을 가진 새 파일을 추가했기 때문에 갑자기 입력이 하위 폴더로 이동하게 됩니다.

일반적으로 예쁜 타이핑을 원하면 어쨌든 하나의 파일로 병합하고 싶을 것입니다 (npm 모듈이 있었는데 그 이름을 계속 잊어 버렸습니다)

0.22.0 버전을 사용하고 있으며 @AntonPilyak 과 거의 동일한 문제가

{
    ...
    input: {
        foo: 'src/lorem/foo.ts',
        bar: 'src/ipsum/bar.ts'
    },
    output: {
        dir: 'dist',
        format: 'cjs',
        sourcemap: true,
    }
}

그리고 나는 이것을 얻습니다.

dist/
    lorem/
        foo.d.ts
    ipsum/
        bar.d.ts
    foo.js
    foo.js.map
    bar.js
    bar.js.map

분명히 *.d.ts 파일을 *.js 및 *.js.map 파일과 나란히 배치하고 싶습니다.

useTsconfigDeclarationDir 및 declarationDir 를 만지작거려도 소용이 없었습니다.

정의 파일은 항상 각각 lorem 및 ipsum 하위 폴더 내에 있으며 플랫 목록에는 포함되지 않습니다.

또한 진입점뿐만 아니라 찾은 모든 .ts 파일에 대해 선언 파일을 생성하는 것처럼 보입니다.

dist/
    lorem/
        foo.d.ts
    ipsum/
        utils/
            bar-helper.d.ts
        bar.d.ts
     some_other_ts_file/
         not_imported_by/
             neither_foo_nor_bar/
                  wat.d.ts
    foo.js
    foo.js.map
    bar.js
    bar.js.map

options.tsconfigOverride.input 범위를 진입점으로 지정하려고 시도했지만 아무 효과가 없는 것 같습니다. 사실 tsconfigOverride.input 가 전혀 작동하는지 확실하지 않습니다.

이 모든 것이 약간 혼란스럽습니다.

...

내 말은, utils/bar-helper.ts 대한 선언 파일을 생성해야 하지만 적어도 wat.ts 는 전체에서 제외되어야 한다면 충분히 공정합니다.

예, tsconfig에서 찾은 모든 파일에 대한 선언을 생성합니다. 특정 파일을 건드리지 않으려면 해당 파일이 tsconfig에서 제외되거나 포함되지 않았는지 확인하십시오. typescript에서 찾은 파일 목록을 보려면 자세한 정도 3으로 플러그인을 실행하고 "parsed tsconfig" 항목을 찾으십시오.

정의 경로의 경우 귀하의 예에서 'src/ipsum/foo.ts' 에 대한 정의를 어디에 두시겠습니까?

dist/foo.js 대한 정의이므로 소스 맵 파일과 마찬가지로 dist/foo.d.ts 옆에 있을 것이라고 가정했습니다.

TypeScript는 dist/foo.js 와 dist/lorem/foo.d.ts 를 쌍으로 인식합니까?

이것이 분해되는 전체 시나리오는 다음과 같습니다.
src/dir1/foo.ts
src/dir2/foo.ts

dir1/foo.ts는 롤업 입력으로 설정하고 dir2/foo.ts를 가져옵니다. 롤업은 두 소스 파일의 관련 부분을 포함할 dist/foo.js 번들을 생성하지만 typescript는 어딘가에 같은 이름을 가진 2개의 유형 정의 파일을 생성해야 합니다.

쉬운 솔루션은 소스 레이아웃을 미러링하는 하위 폴더를 사용하는 것입니다. 유형 정의를 병합하도록 지시하지 않는 한 tsc 도 마찬가지라고 생각합니다(rpt2는 정의 병합을 지원하지 않음).

그리고 예, typescript는 유형 정의를 찾을 위치를 알고 있습니다. 따라서 약간 지저분한 것 외에는 문제가 되지 않습니다. npm에 유형이 있는 패키지를 배포하려면 "types" 의 package.json 를 진입점에 대한 d.ts 파일로 설정합니다. Typescript는 거기에서 물건을 찾을 것입니다.

아, 그래서 이 플러그인은 실제로 선언 빌드 프로세스의 어떤 부분도 관리하지 않습니다. Rollup의 프로세스와 무관하게 tsc 를 실행하여 제 기능을 수행합니까?

그래도 몇 개의 모듈만 노출/게시하는 경우 TypeScript가 만나는 모든 단일 ts 파일에 대해 *.d.ts 파일을 생성하기를 원하는 이유는 무엇입니까? 진입점으로만 제한할 수 있는 방법은 없나요?

문제는 독립 실행형 모듈 세트( import tool1 from 'myTools/tool1'; 등)를 내보내고 있으므로 pkg.types 에서 사용할 단일 진입점이 없습니다. 각 정의 파일은 VSCode가 선택하도록 *.js 대응 파일 옆에 있어야 합니다.

더 나쁜 것은, 내가 가지고 있다면

{
    ...
    input: {
        fooscript: 'src/foo/index.ts',
        barscript: 'src/bar/index.ts'
    },
    output: {
        dir: 'dist',
        format: 'cjs',
        sourcemap: true,
    }
}

나는 얻다:

dist/
    foo/
        index.d.ts
    bar/
        index.d.ts
    fooscript.js
    fooscript.js.map
    barscript.js
    barscript.js.map

이제 TypeScript가 dist/fooscript.js 와 dist/foo/index.d.ts 를 쌍으로 만들 방법이 없습니다.

...

플러그인이 각 JavaScript 번들 파일에 대한 TypeScript 대상/출력 경로를 제공할 수 있는 방법이 없습니까? tsc가 원래 항목 파일 이름을 수신하고 선언을 생성할 때 이를 꽉 잡고 있는 것 같습니다.
...또는 각 입력 파일에 대해 해당 *.d.ts 파일을 찾아 이동+이름을 입력 파일 맵 대상으로 바꿉니다. (당신은 내가 여기에서 내 엉덩이를 말하고 있다는 것을 알 수 있습니다. 그래서 ... ;-)

이것은 Rollup이 완료된 후에 수동으로 시도해야 하는 것입니다. 그러나 플러그인이 자동으로 처리한다면 훨씬 더 좋을 것입니다.

아니요, 플러그인은 LanguageServices(동일한 typescript API IDE에서 일반적으로 사용)를 사용하므로 작성할 내용과 위치를 제어할 수 있습니다.

롤업 입력당 하나의 유형 정의를 작성하려면 해당 입력에 대한 모든 가져오기에 대한 정의를 병합해야 합니다. 롤업은 하나의 입력 ts 파일을 볼 수 있지만 빌드할 때 원하는 수의 소스 파일을 가져와 번들링할 수 있으며 이러한 유형도 생성되어야 합니다.

현재 저는 tsconfig 파일을 볼 때 typescript가 찾는 모든 것에 대한 정의를 생성하는 데 오류가 있습니다. 변환된 모듈에 대해서만 유형을 생성하는 경우 유형만 파일은 무시됩니다.

그 부분을 다시 방문해야 할지도 모릅니다. 그 부분이 완료되고 나서 API가 상당히 변경되었습니다 ...

나는 당신의 예를 작동시키는 방법을 봐야 할 것입니다. 하나의 롤업 구성에서 여러 번들에 대한 더 나은 지원이 필요할 수 있습니다.

패키지를 빌드한 후 어떻게 소비합니까? npm에 게시하고 패키지 이름으로 가져올 수있는 것이 아닙니다 ...

독립 실행형 유틸리티 모음을 만들고 있습니다. 게시/설치된 패키지의 루트 폴더에는 모든 빌드된 모듈 파일이 플랫 목록에 포함되어 있습니다.

(나는 테스트 파일이 혼합된 중첩된 폴더 구조의 TS/ES6에 작성하고 있으며, 롤업을 사용하여 코드 분할 및 인라인을 효율적으로 혼합하여 플랫 CJS 파일 목록으로 변환합니다. 공유 코드입니다.)

그런 다음 다음과 같이 파일 이름으로 도구를 가져와서 사용합니다.

import tool1 from 'myTools/tool1';
import tool2 from 'myTools/tool2';

아이디어는 전체 툴킷에 대한 단일 진입점을 갖지 않음으로써( pkg.main 또는 pkg.module 항목 없음) 거의 사용되지 않고 실험적인 도구를 추가하는 데 신경 쓰지 않을 수 있다는 것입니다. 다운스트림 소비자를 위한 무게/팽창을 추가하지 않고(효율적인 트리 흔들기가 없을 수 있음).

...지금은 명령줄에서 tsc 를 사용해 왔으며 이제 여러분이 다루고 있는 한계를 알 것 같습니다.

그러나 tsc를 실행하고 모듈/출력 형식을 "amd" 또는 "system" 로 설정하면 모든 항목의 깔끔한 목록이 포함된 단일 *.d.ts 파일이 생성됩니다. 필요한 declare module "..." 블록이 인라인되었습니다.

이 동작이 파일 이름 바꾸기/이동 및 마지막 (주) 모듈 선언의 래핑 해제/다시 쓰기를 통해 어떻게든 악용될 수 있는지 궁금합니다.

참고 사항: tsc 는 해당 선언 파일을 트리 흔들기 위해 많은 노력을 기울이지 않는 것 같습니다. 어떤 경우에는 매우 간단한 단일 함수 서명을 내보내는 기본(진입점) 모듈을 볼 수 있지만 선언 파일은 "뒤에서" 사용되는 모든 개인 모듈에 대한 선언 블록을 노출합니다. 재미있는. :-)

다시 안녕.
지금은 tsc 에 대한 사용자 정의 declarationDir 를 설정하여 모든 *.d.ts 를 덤프한 다음 동일한 항목 파일을 가져오는 독립 실행형 스크립트를 실행합니다. 내가 Rollup에 공급할 때 output-file 객체를 생성하고 실제 선언 파일을 단순히 export * from 하는 번들 대상 수준 선언 파일을 생성합니다.

기본적으로 다음만 포함하는 dist/fooscript.d.ts 를 생성합니다.

export *  from './__types/foo/index';

보기 흉한 독립형 해킹이지만 예측 가능한 올바른 결과를 제공합니다.

rollup-plugin-typescript2 이 비슷한 작업을 수행할 수 있는지 궁금합니다.

그래요.

예를 들어 관련된 각 d.ts에 대해 /// <reference types=""/> 무리가 있는 <bundlename>.d.ts 생성과 같은 몇 가지 아이디어가 있습니다.

먼저 너무 많은 유형 선언을 생성하는 관련 버그를 수정하고 루트 파일과 실제로 가져오는 모든 것으로만 제한해야 할 수도 있습니다.

몇 가지 생각:

IMO, 내 해킹에서 유일하게 추악한 부분은 롤업 프로세스와 구별된다는 사실입니다. 중개자 *.d.ts 는 실제로 Rollup에서 생성된 번들과 tsc 정의 사이를 연결하는 매우 깔끔하고 관용적인 방법입니다.

tsc -generated 선언 파일은 상대 경로를 통해 서로 참조하기 때문에 해당 파일/폴더 구조는 그대로 두는 것이 가장 좋습니다.

그리고 rollup-plugin-typescript2 가 output.dir + '__types' 와 같은 것을 기본 declarationDir 하면 tsc 의 지나친 열심으로 인한 혼란이 깔끔하게 제거됩니다. 명확하게 명명된 폴더 안의 광경. 그런 식으로 관련 없는 정의 파일은 IMO에서 매우 사소한 문제가 됩니다.

FWIW, 여기 내 스크립트의 고기가 있습니다.

const { makeInputMap, getEntrypoints, distFolder, srcFolder } = require('./buildHelpers');
const { writeFileSync } = require('fs');
const { relative } = require('path');

const srcPrefixRe = new RegExp('^' + srcFolder + '/');
const tsExtRe = /\.tsx?$/;

const declDirRelative = './' + relative(
  distFolder,
  require('../tsconfig.json').compilerOptions.declarationDir
);

const tsEntrypoints = getEntrypoints()
  .filter((fileName) => tsExtRe.test(fileName));

Object.entries(makeInputMap(tsEntrypoints))
  .forEach(([moduleName, sourcePath]) => {
    const tscDeclFile = sourcePath
      .replace(srcPrefixRe, declDirRelative + '/')
      .replace(tsExtRe, '');
    const outFile = distFolder + '/' + moduleName + '.d.ts';
    writeFileSync(
      outFile,
      [
        'export * from "' + tscDeclFile + '";',
        'import x from "' + tscDeclFile + '";',
        'export default x;',
        '',
      ].join('\n')
    );
  });

console.info('Created local declaration files for TypeScripted entrypoints.');

기본 내보내기를 명시적으로 다시 내보내야 하는 것처럼 보이므로 위의 예를 업데이트했습니다.

예비 테스트에 따르면 default 내보내기가 없는 선언 파일에서 맹목적으로 default 를 다시 내보내는 것은 무해하며 조용히 무시됩니다. (적어도 VSCode에서는.)

안녕하세요, 이 문제는 v0.23.0에서 해결되어야 합니까?

(...사용자 정의 패핑을 모두 삭제하려면 프로젝트를 업데이트하고 업데이트해야 하는지 궁금합니다.)

0.23은 보이는 모든 것에 대한 선언을 생성하지 않지만, 여전히 상대 하위 폴더에서 실제로 가져오는 선언을 생성합니다. 업데이트하고 더 가벼운 유형을 가질 수 있지만 아직 루트 유형 선언을 생성할 항목이 없습니다.

내 사용자 지정 해결 방법 빌드 스크립트(위 참조)가 점점 더 많은 프로젝트에 적용되고 있습니다. 오_오

참고: 이후 공식 @rollup/plugin-typescript 패키지 개발이 재개되었으며 이제 유형 검사 및 선언 파일 출력 기능이 있으므로 이를 사용하기 위해 개인적으로 전환하고 있습니다.
그러나 제한 사항은 거의 동일합니다.

@maranomynet 롤업이 작동한 후 선언 파일을 이동하기 위해 여전히 스크립트에 의존합니까? 나는 나 자신을 바꾸는 운이 별로 없었다.

예. tsc 가 종단 간 번들링을 수행하지 않는 한 이것이 유일한 방법인 것 같습니다.
이러한 롤업 플러그인은 tsc에 두 가지 다른 작업을 수행하도록 효과적으로 요청하는 것 같습니다.

1. "이러한 모든 개별 모듈을 유형 확인하고 JavaScript로 변환"하고 내가(즉, 롤업) 번들링 및 디스크 쓰기를 수행하도록 합니다.
2. "이 TS 프로젝트 폴더에 대한 모든 선언을 만들고 거기에 덤프하십시오."

1과 2의 결과는 일치하지 않으며 "입력 맵" 및 코드 분할 등을 사용할 때 일치할 수 없습니다. – AFAICT.

...롤업 플러그인을 유형 선언 생성 프로세스에 훨씬 더 많이 포함시키지 않는 한.

아 그렇군요 제가 생각한게 맞네요 감사합니다! 도움이 되는 답변에 👍를 주셨고 👎는 제가 느낀 점입니다.

이것에 행운이 있습니까?

@maranomynet 과 저와 같은 src 폴더 구조를 가진 고군분투하는 영혼을 위해.

나는 그것에 대한 빠른 수정을 발견했습니다. 또 다른 추악한 방법 일 수 있지만 저에게 효과적입니다.

rollup-plugin/typescript2를 사용하고 있으므로 이 답변에서 해당 구성을 사용하겠습니다.
프로젝트가 번들된 dist의 자체 경로에 있는 모든 *.d.ts 파일을 덤프할 수 있도록 tsconfig.json에 자신의 DeclarationDir을 정의하십시오. 그리고 롤업 구성 파일의 typescript 플러그인에서 useTsConfigDeclarationDir을 true로 설정해야 합니다.
또한 rollup.config.js(및 package.json)에서 개별 구성 요소 번들에 대한 출력 경로를 정의하는 경우 해당 경로를 'declarationDir' + 'src 구성 요소 경로'와 동일하게 변경하세요. 따라서 src의 구성 요소가 다음과 같은 경우:

src/홈페이지/foo.tsx

그리고 귀하의 DeclarationDir은 다음과 같습니다.

dist/MyDeclarationDir

따라서 출력 경로는 다음과 같아야 합니다.

dist/MyDeclarationDir/homepage/foo.js

이렇게 하면 롤업은 구성 요소 main.js와 동일한 디렉터리에 유형을 포함하고 TS 소비자 프로젝트는 입력을 선택합니다.

따라서 번들은 다음과 같이 보일 것입니다.

거리/

    declarationDirPath/
                  component1/
                        foo.js/
                              foo.js
                              foo.map.js
                        foo.d.ts
                   component2/
                        bar.js/
                               bar.js
                               bar.map.js
                        bar.d.ts