vue-class-component를 사용하여 es6 vue-component 라이브러리를 구축하는 방법

vue-class-component를 사용하여 es6 vue-component 라이브러리를 구축하는 방법

다음과 같은 요건을 가진 vue-class-component 및 vue-property-decorator를 사용하여 vuejs 구성 요소 라이브러리를 형식 스크립트로 생성하려고 합니다.

• 라이브러리 구성 요소는 클래스 형식의 타이프 스크립트로 작성해야 합니다.
• 프로젝트에서 트리쉐이킹을 허용하려면 라이브러리 구성 요소를 es6 모듈로 내보내야 합니다.

라이브러리에서는 최신 버전의 @vue/cli를 사용하여 프로젝트의 골격을 설정했습니다.그 라이브러리 프로젝트에서는 컴포넌트가 정상적으로 동작하고 있습니다.

반면 어플리케이션은 웹 팩 설정을 사용하고 있으며, 여기서는 vue-components를 사용하고 있습니다.

보통 es6에서 타이프스크립트 기반 라이브러리를 구축하려면 tsc를 사용하여 ts 파일을 es6 js 파일로 변환합니다.그러나 이 방법으로는 구성 요소가 템플릿을 인식하지 못합니다.tsc와 vue-template-compiler를 조합하는 방법이 있습니까?

다른 방법을 찾아냈지만, 이 방법으로는 전혀 만족할 수 없습니다.

나는 사용했다"vue-cli-service build --target lib --name vue-lib ./src/index.ts"이렇게 하면 vue-cli-service는 여기서 설명하는 대로 umd-bundle 및 commonjs-bundle을 생성합니다.프로젝트에서는 컴포넌트와//@ts-ignore를 참조해 주세요.따라서 선언이 손실되고 컴포넌트는 es6 구문이 아닙니다./

현재 안고 있는 문제를 보다 잘 이해하기 위해 github에 최소한의 예를 작성했습니다.이 예에서는, 이하를 참조해 주세요.

라이브러리: https://github.com/Sh4bbY/vue-lib

응용 프로그램: https://github.com/Sh4bbY/vue-project

언급URL : https://stackoverflow.com/questions/51173059/how-to-build-a-es6-vue-component-library-using-vue-class-component