Vue 컴파일을 통해 별도의 패키지로 공유되는 별도의 계산 기능

Question

다른 패키지 간에 공통 vue/nuxt특정 코드를 공유하는 방법은 무엇입니까?

monorepo를 사용하고 싶지 않지만 자체 패키지로 분리하고 싶은 공유 코드가 있습니다. 이 공유 코드(새 패키지)는 @nuxtjs/composition-api를 사용하여 작성되었으며, 다른 구성 요소에서 반복적으로 사용되는 공유 계산된 /템플릿 ;메서드.

이 패키지를 플러그인으로 설정하고 싶지 않습니다. 대신 트리 쉐이킹을 활용하려면 직접 가져오세요(composition-api처럼).

저는 rollupjs를 사용하여 가져오기 가능한 모듈을 만드는 데 익숙합니다.

//새 패키지
//index.js
'./src/isTrue'에서 { 기본값을 isTrue로 } 내보내기
...

//src/isTrue
'@nuxtjs/composition-api'에서 { 계산된 } 가져오기

내보내기 기본값(p) =>
  return 계산(() => p === 'true') //이것이 응답성을 파괴할지 ​​잘 모르겠습니다. ! ? !
}

rollupjs

를 통해 .ssr, .esm, .min 형식으로 컴파일하는 데 아무런 문제가 없었습니다.

새 패키지를 작업 파일로 가져올 때 문제가 발생합니다.

'new-package'에서 { isTrue } 가져오기

기본값 내보내기{
이름: 'testComp',
설정(소품){
  반품 {
    isActive: isTrue(props.active)
  }
}

다음을 생성합니다.

[vue-composition-api] Vue.use(VueCompositionAPI)는 함수를 사용하기 전에 호출되어야 합니다. 

@nuxtjs/composition-api가 VueCompositionAPI의 래퍼라는 것을 이해합니다.

새 패키지를 플러그인으로 설치하고 싶지 않아서 새 패키지 설치를 생략합니다. (설치 예: https://github.com/wuruoyun/vue-comComponent-lib-starter/blob /master/src/install .js)

Answer 1

중고 options API

으아악

library.js를 컴파일하고 가져오려면 rollupjs를 사용하세요

으아악