등록되지 않은 컴포넌트를 기반으로 한 Vue.js 빌드에 실패할 수 있습니까?

등록되지 않은 컴포넌트를 기반으로 한 Vue.js 빌드에 실패할 수 있습니까?

다음 구성 요소 템플릿을 고려하십시오.

<template>
  <Unknown></Unknown>
</template>

서...어디에Unknown글로벌하게 등록된 컴포넌트일 수도 있고 아닐 수도 있습니다.실행 시 다음과 같은 정보 오류가 발생합니다.

[Vue warn] :알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공해야 합니다.

[...]

다만, 제 사용 사례에 대해서는, 빌드시에 이러한 일이 발생하지 않도록 하고 싶습니다.현재 이 시나리오에서 정상적으로 빌드를 수행한 후 런타임에 오류를 표시합니다(현시점에서는 사용되지 않음).

이 잠재적인 문제를 신중하게 포착하여 빌드 실패를 강요할 수 있는 방법이 있는지 궁금합니다.는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★--strict이러한 상황을 허용하지 않는 플래그(또는 이와 유사한 플래그)

템플릿 컴파일러와 컴포넌트 컴파일러를 사용하여 수동 검사로 검출할 수 있는지 시험해 보았지만 놀랍게도 에러는 보고되지 않았습니다.

좋은 생각 있어요?

---

여기에서는 더 낮은 수준의 컴파일러 유틸리티를 사용한 자세한 실험을 소개합니다.동일한 결과를 관찰하기 위해 휴대할 수 있어야 합니다.두 오류 보고 필드가 모두 비어 있습니다.

"dependencies": {
  "@vue/component-compiler-utils": "3.0.0",
  "vue-template-compiler": "2.6.10"
}
[...]

const ccu = require('@vue/component-compiler-utils');
const vtc = require('vue-template-compiler');

const file = `
<template>
  <div class="component">
    <Unknown></Unknown>
  </div>
</template>

<script>
  export default {
    name: 'Component',
    data: function () {
      return {}
    },
  }
</script>

<style scoped lang="scss">
  .component {
    width: 100px;
    height: 100px;
  }
</style>
`;

const parsed = ccu.parse({
  compiler: vtc,
  source: file,
  needMap: false
});

const compiled = ccu.compileTemplate({
  compiler: vtc,
  source: parsed.template.content,
});

console.log('parsed | errors', parsed.errors);     // [] empty!
console.log('compiled | tips', compiled.tips);     // [] empty!
console.log('compiled | errors', compiled.errors); // [] empty!

유감스럽게도 답은 이것이 불가능하다는 것이라고 생각합니다.설명과 관련된 배경 정보는 설명서의 "컴포넌트 등록" 섹션을 참조하십시오.

이후:

1. 할 수 (동적 등록).Vue.component('MyComponent', { /* ... */ })Vue 어플리케이션의 라이프 타임 중 언제든지 사용할 수 있습니다.
2. 컴포넌트는 플러그인으로 추가할 수 있으며 초기화 후에도 비동기식으로 추가할 수 있습니다.
3. 컴포넌트를 동적으로 사용할 수 있습니다.
4. 컴포넌트명은 어플리케이션에서 허용된 이름의 열거형 또는 동등한 "고정" 레지스트리가 아닌 단순한 문자열입니다.

코드 아나라이저가 요구하는 것을 실현하는 일반적인 방법은 없습니다.이상과 같이, 당신이 시도했던 옵션 중 어느 것도 오류를 보고하지 않는 것이 놀랍지 않습니다.플러그인에 의해 등록된 컴포넌트에서는 동작하지 않기 때문에, 그 반대의 경우도 놀랄 것입니다.실제로 명명된 컴포넌트를 사용할 수 있는지 여부를 런타임 전에 알 수 있는 다른 방법은 없습니다.

단, 알 수 없는 컴포넌트를 사용하는 컴포넌트를 인스턴스화하는 유닛테스트를 작성해 보았습니다.같은 "Unknown custom element.." 콘솔에 경고가 표시되지만 아무것도 표시되지 않으므로 테스트는 실패하지 않습니다.아쉽다...경고의 소스코드를 살펴봤지만 유감스럽게도 누락된 컴포넌트를 기록할 수 있는 등록은 되어 있지 않습니다.

또 다른 옵션은 컴포넌트를 마운트하는 유닛 테스트를 수행한 후vm.$refs또는 DOM 요소(원하는 컴포넌트가 실제로 렌더링되었는지 여부)를 나타냅니다.번거로우시겠지만 유지보수가 많이 필요하실 것 같습니다.

하지만, 경고를 받을 수 있는 멋진 갈고리를 찾은 것 같아!체크 아웃 합니다.를 추가할 수 있습니다.warnHandler구성 요소를 장착하고 누락된 요소에 대한 경고가 발생하지 않는지 점검합니다.

몇 개의 루트를 사전 렌더링 해 보고, 그 페이지의 에러를 체크할 수 있습니다.아마 100% 확신할 수는 없겠지만, 적어도 대부분의 중요한 페이지는 다룰 수 있습니다.

이 플러그인은 도움이 될 수 있습니다.https://www.npmjs.com/package/vue-cli-plugin-prerender-spa

위의 vue distintive reactjs는 jsx와 sugar의 구문입니다.이 컴포넌트가 생성되면 알 수 없는 컴포넌트에서는 할 수 있다고 할 수 있습니다.알 수 없는 컴포넌트에서는 비동기화가 가능하기 때문에 비동기화를 렌더링할 수 없습니다.결론: 이 경고는 서버 옵션이 있는 json config에 대해 금지되어 있습니다.vue 이 옵션은 adow module과 함께 활성화되어 있습니다.자세한 경고를 위해 모듈을 설치할 수 있습니까?모드 개발 시 이 모드는 디폴트로 늘입니다.

의 v7.0.0 이후eslint-plugin-vue플러그인, 호출할 수 있는 규칙이 있습니다.고객님의 고객명.eslintrc.js파일, 추가:

  rules: {
    'vue/no-unregistered-components': 'error',
    ...
      }
    ]
  }

매뉴얼에서는 다음과 같이 경고하고 있습니다.이 규칙은 글로벌하게 등록된 컴포넌트와 믹스인에 등록된 컴포넌트를 확인할 수 없습니다.."

언급URL : https://stackoverflow.com/questions/57615609/can-i-fail-a-vue-js-build-on-unregistered-components