Rollup-plugin-typescript2: 파일 가져오기 보기

tsconfig 및 롤업 구성을 게시할 수 있습니까?

또는 재생산이 있는 작은 리포지토리 :)

불행히도 "작은"저장소가 없습니다. 저는 webpack 에서 rollup 로 마이그레이션하려고 여기 에서 일하고

에서 가져 오기 rollup.config.js 변경 될 수 있습니다 rollup-plugin-typescript2 차이를 볼 수 있습니다.

안녕하세요.

우선 이 플러그인을 작업해 주셔서 대단히 감사합니다. 실제로 rollup-plugin-typescript 보다 훨씬 더 의미가 있습니다.

이 문제가 있음을 확인하고 작은 데모 저장소를 설정할 수 있습니다.
https://github.com/danimoh/rollup-plugin-typescript2-vue-demo

import AnotherComponent from './AnotherComponent.vue'; 행을 주석 처리하면 컴파일되지만 불행히도 이 행이 활성화된 상태에서는 그렇지 않습니다.

비슷한 시기에 이 문제가 발생했다는 것이 재미있습니다. 최근 변경 사항으로 인해 발생 했습니까?
롤업, 롤업 플러그인 및 타입스크립트에 대한 지식이 매우 제한적인 제 추측은 다음과 같습니다.
typescript 자체가 롤업 대신 AnotherComponent 가져오기를 시도하거나 해당 가져오기를 먼저 처리하는 rollup-plugin-vue 합니까?

rollup-plugin-typescript transpileModule 하여 파일별로 컴파일할 때 rollup-plugin-typescript 이 문제가 없는 이유가 설명됩니다.

이 경우 다음이 흥미로울 수 있습니다. https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#customizing -module-resolution

이 문제에 대한 모든 작업은 대단히 감사합니다.

두 리포지토리에서 모두 재현되었으며 아직 동일한 문제인지 확실하지 않지만 가능성이 있습니다.

두 번째 경우를 수정하려면 vue 플러그인이 할 수 있도록 모듈 해상도를 롤업으로 다시 보내야 합니다.

롤업의 모듈 해상도와 타입스크립트를 연결하는 문제는 이후 버전의 롤업이 context.resolveId(...) 에서 약속을 반환한다는 것입니다. 따라서 호출 체인은 다음과 같습니다.

• 롤업은 플러그인의 변환을 호출합니다.
• 플러그인은 typescript의 LanguageService.getEmitOutput 호출합니다.
• 언어 서비스는 플러그인의 LanguageHost.resolveModuleNames 구현을 호출하고 해결된 경로가 해당 함수에서 반환될 것으로 예상합니다.
• 호스트 호출 롤업의 PluginContext.resolveId
• 롤업은 약속을 반환합니다.
• 내가 올바르게 이해했다면 약속으로 할 수 있는 것은 다른 약속을 하는 것뿐

LanguageService 는 엄격하게 동기적인 것 같습니다: https://github.com/Microsoft/TypeScript/issues/1857

Plugin.transform 자체가 Promise를 반환할 수 있지만 관찰자 객체에 대한 내부 콜백 내부에서 만든 여러 약속을 연결하는 메커니즘이 현재로서는 이해하기 어렵습니다.

다소 관련: https://github.com/rollup/rollup/issues/2631

안녕하세요 에졸렌코입니다.

요즘 Javascript의 비동기 메서드는 대부분 Promise를 반환하는 메서드를 의미합니다. 새로운 async / await 구문은 본질적으로 개발자가 동기 코드와 유사한 코드를 작성할 수 있도록 하는 비동기 메서드에 대한 구문 설탕이며 async 메서드는 여전히 약속을 반환합니다. await 는 async 메서드에서만 사용할 수 있습니다. 알다시피 LanguageHost.resolveModuleNames 메서드는 비동기식이 아니므로 일반 Javascript에서 약속을 기다린 후에만 해당 메서드에서 반환할 수 없습니다.

그러나 NodeJ에서는 현재 스레드에서 동기 메서드를 생성한 다음 비동기 메서드로 점프하고 비동기 메서드가 해결될 때 동기 메서드로 다시 점프하면 이와 같은 작업이 실제로 가능합니다. synchronize.js 와 같은 섬유 또는 래퍼를 참조하십시오.

따라서 비동기 메서드 호출은 실제로 큰 문제가 되지 않습니다. 하지만 다른 문제가 있을 수 있습니다. 플러그인 컨텍스트가 resolveId 메소드를 제공하지만 그것만으로는 충분하지 않습니다. vue 단일 파일 구성 요소에서 typescript 코드를 추출하려면 transform of rollup-plugin-vue 를 호출해야 합니다. 플러그인 컨텍스트는 불행히도 해당 기능을 제공하지 않는 것 같습니다.

이 문제를 해결하는 한 가지 방법은 rollup-plugin-vue 를 프로젝트에 종속성으로 추가하고 vue 플러그인에서 직접 transform 를 트리거하는 것입니다. 그것은 확실히 전혀 아름답지 않고 롤업 플러그인으로 작업하는 의도된 방법이 아닙니다.

또 다른 접근 방식은 첫 번째 실행에서 transpileModule in transform 실행하여 롤업이 모든 가져오기를 수집하도록 하고 vue 플러그인 transform 이 단일 파일 구성 요소를 만들고 추출된 typescript 코드를 캐시합니다. 그런 다음 롤업이 완료되기 전에 변환된 코드를 버리고 renderChunk 또는 generateBundle 플러그인 후크에 캐시한 코드에 대해 적절한 유형 스크립트 컴파일을 수행합니다. 이것은 우리가 버릴 코드에 추가 변환을 적용하지만 다른 플러그인을 방해할 수 있습니다.

현재로서는 더 아름다운 솔루션이 아직 보이지 않습니다.

편집: 다시 생각해보면 두 번째 접근 방식은 아마도 _그_ 추악하지 않을 것입니다. renderChunk 또는 generateBundle 후크 대신 플러그인은 마지막 가져오기를 가져올 때 자체를 감지할 수 있으며 그 시점에서 컴파일을 처음부터 시작하고 컴파일된 파일을 롤업 대기열에 추가하여 실제로 다른 모든 플러그인에서도 처리할 수 있습니다. 이전에 생성된 파일은 최종 번들에 포함되지 않도록 하려면 여전히 버려야 합니다.
그럼에도 불구하고 이 접근 방식은 다른 플러그인이 어쨌든 폐기할 파일에 대해서도 처리하도록 하기 때문에 처리 시간을 낭비합니다.

@danimoh @eddow 두 예제 저장소에 대한 해결 방법은 문제가 되는 가져오기 바로 위에 // @ts-ignore 하여 오류 검사를 비활성화하는 것입니다.

오류는 기본적으로 *.vue 항목이 어떤 유형인지 모른다고 불평하는 typescript입니다( Cannot find module 는 모듈 유형을 의미함). 일단 침묵하면 모든 것이 올바르게 컴파일되는 것 같습니다. 단점은 vue 파일에서 가져온 것들이 any 유형이고 오류 검사에 도움이 되지 않는다는 것입니다.

(최소 리포지토리에서 첫 번째 구성 요소는 두 번째 구성 요소에 대한 참조가 필요합니다. 그렇지 않으면 롤업 트리를 번들에서 멀리 떨어뜨립니다.)

@danimoh , 컨텍스트를 통해 롤업에서 모듈 소스를 가져올 방법이 없습니다. 대부분은 vue 플러그인 측에서 수행할 수 있지만(저는 그곳에서 사례를 열었습니다) 잠재적인 함정이 있습니다. 예를 들어 rpt2는 스크립트를 가져오는 스크립트를 변환하기 전에 추출된 스크립트를 변환해야 합니다.

vue 문제 스레드에서 설명하는 접근 방식은 본질적으로 vue 파일 가져오기를 무시하고 롤업이 해당 파일을 typescript에 피드백하기를 기다리기 때문에 한 번에 하나씩 파일을 처리하는 typescript가 필요하다고 생각합니다. 따라서 파일 전체에서 유형 검사가 느슨해집니다.

vue 플러그인이 ts를 처리하도록 하는 대신 다음이 유효한 접근 방식일 수 있으며 앞서 제안한 추악한 해킹을 더 잘 반복할 수 있습니다.

• vue 플러그인 인스턴스가 options hook을 통해 노출되나요?
  그렇게 하면 vue 플러그인에서 transform 메소드를 호출할 수 있습니다.
• https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API 에서 ts CompilerHost 및 LanguageServiceHost 사용자 정의 fileExists 공급할 수 있는 것으로 보입니다. readFile , getScriptSnapshot 등.
• 둘 다 작동하면 typescript가 vue 플러그인에서 AST로 가져온 코드를 구문 분석하고 해당 AST에서 가져오기를 수집하고 .vue 파일인 경우 vue 플러그인에서 요청할 수 있습니다. 모든 vue 파일에 대해 추출된 typescript 코드를 캐시하고 vue 가져오기에 대해 캐시된 ts 코드를 반환하기 위해 readFile 와 같은 메서드를 덮어씁니다.

편집: 실제로 fileExists 및 readFile 덮어쓸 수 있다면 typescript가 가져오기를 원하는 모든 가져오기에 대해 이러한 메서드를 호출하기 때문에 AST를 순회하여 가져오기를 직접 수집할 필요가 없습니다. 어쨌든. 그런 다음 요청 시 vue 플러그인을 호출하기만 하면 됩니다.

Vue 플러그인 인스턴스가 노출되었을 수 있습니다. 롤업에서 플러그인이 서로를 호출할 것으로 예상하는지, 그리고 이 경우 무언가가 중단될지(즉시 또는 미래에) 알 수 없습니다.

두 번째 요점이 작동할 것입니다. 바로 LanguageServiceHost 입니다.

이 접근 방식은 작동할 수 있으며, 주요 단점은 vue 플러그인과의 잠재적으로 취약한 결합 및 폐기 작업에 대한 추가 주기입니다.

롤업에 플러그인이 변환을 중단하고 현재 파일을 다시 시도하기 전에 변환할 종속성을 선언할 수 있는 방법이 있었으면 합니다. 그러면 깔끔하게 구현될 수 있습니다...

사실 버리는 일은 없다고 생각합니다. Typescript는 코드를 한 번만 컴파일하고 vue 플러그인은 추출된 ts 코드를 캐시하는 경우 모든 파일을 한 번만 처리해야 합니다. 이 접근 방식은 자체 결과 또는 이전 제안 이외의 다른 플러그인 결과를 버리지 않습니다.

예, 롤업에서 일부 아키텍처 변경이 필요합니다. 아마도 이와 같은 것을 구현하기 위해 문제를 제기할 수 있지만 아마도 오랜 시간이 걸릴 것입니다.
또한 그것이 상황을 훨씬 더 좋게 만드는지 확실하지 않습니다. 우리는 여전히 typescript가 모든 파일에 대한 유형 검사를 수행하기 위해 모든 것을 한 번에 컴파일하는지 확인해야 합니다. 그렇지 않으면 우리는 또한으로 실행될 수 있습니다 이 .

이 설정으로 단일 vue 구성 요소를 컴파일하는 것이 효과적입니다.

import VuePlugin from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'

export default {
  plugins: [
    typescript({
      typescript: require('typescript'),
      objectHashIgnoreUnknownHack: true,
    }),
    VuePlugin(/* VuePluginOptions */),
  ],
  input: 'src/components/HelloWorld.vue',
  output: [
    { file: 'dist/HelloWorld.cjs.js', format: 'cjs' },
    { file: 'dist/HelloWorld.esm.js', format: 'esm' },
  ],
}

이것이 lang="ts"인 Vue SFC에서 모듈을 만드는 가장 좋은 방법인지 확실하지 않습니다.

누구든지 조언이 있으면 알려주십시오.

이 설정으로 단일 vue 구성 요소를 컴파일하는 것이 효과적입니다.

맞습니다. 하지만 실제 사용 사례는 아닙니다. 안녕하세요 월드입니다. 문제를 이해하는 데 문제가 있는 사람을 위해 여기 내가 수집한 내용이 있습니다.

롤업은 말 그대로 이것을 할 수 없습니다

왜? 다음은 예입니다.

<script lang="ts">
import Bar from './Bar.vue';
...
</script>

1) vue 플러그인은 스크립트를 typescript 플러그인으로 전달합니다.
2) typescript 플러그인은 .vue 파일을 만나지만 롤업이 webpack과 같은 가져오기에서 플러그인이 다른 플러그인을 연기하는 메커니즘을 제공하지 않기 때문에 이 파일로 무엇을 해야 할지 알 수 없습니다. 일반 JS는 플러그인을 따를 수 있지만 이미 플러그인에서 처리 중인 코드는 수행할 수 없습니다.
3) 실제로 이것이 lang=scss 또는 lang=ts 와 다른 이유를 이해하지 못하지만 추측합니다.

글쎄, 내가 무엇을 할 수 있습니까?

별로.

하지만 뷰티파이! 버프!

Vuetify는 typescript이지만 SFC를 사용하지 않습니다. 순수한 렌더 기능입니다.

Buefy는 SFC와 롤업을 사용하지만 typescript는 사용하지 않습니다.

그런데 정말, 내가 할 수 있는 것이 없습니까?

당신은 그것을 좋아하지 않을거야. typescript 파일에서 가져와야 하는 모든 Vue 파일에 대해 일반 자바스크립트 파일 중개자를 만들어야 합니다.

import Bar from './Bar.vue';

export default Bar;

그런 다음에만 롤업을 사용하여 typescript SFC 구성 요소 라이브러리를 빌드할 수 있습니다.

이런, 짜증난다

더 나은 해결책이 있다면 듣고 싶습니다.