동적으로 구성 요소를 가져 오는 방법

Question

다양한 다양한 위젯을 입력으로 사용하도록 구성 할 수있는 일반 양식 필드를 Vue에 만들려고합니다. 나는 입력의 디렉토리를 가지고 올바른 하나를 가져 와서 내 구성 요소에 사용하고 싶습니다. 지금까지 나는 가져 오기 작업을 할 수조차 없습니다. 이 구성 요소는 양식을 구성하기 위해 스키마를 사용하는 React 용 Winterfell 라이브러리에서 영감을 얻었습니다. 표준 webpack 로더와 JSX에서 Vue를 사용하고 있습니다.

여기 내 간단한 FieldValue 구성 요소가 있습니다. ./inputs/TextInput (또는 이름으로 입력 하위 디렉토리의 다른 항목)과 같은 구성 요소를 동적으로 가져올 수 있어야합니다.

<script> 

/* Schema format 
    { 
     id: 'ABCD', 
     label: 'Some text', 
     input: { 
      type: theNameOfTheInputComponentToUse, 
      options: { 
       ... 
      } 
     } 
    } 
*/ 

var Inputs = require('./inputs'); 

export default { 
    props: { 
     schema: { 
      type: Object, 
      required: true 
     } 
    }, 
    render: function(h) { 
     // let Input = Inputs[this.schema.input.type]; 
     let Input = require('./inputs/' + this.schema.input.type); 
     if (!Input) { 
      throw new Error('Unknown Input Type "' + this.schema.input.type + '". This component should exist in the inputs folder.'); 
     } 

     return (
      <div class="form-group"> 
       <label for="{this.id}" class="col-sm-2 control-label">{this.schema.label}</label> 
       <div class="col-sm-10"> 
        {JSON.stringify(this.schema)} 
        <input schema={this.schema} /> 
       </div> 
      </div> 
     ); 
    } 
}; 
</script> 

나는 그것이 컴파일되지 않습니다 응용 프로그램을 실행하려고 내가 콘솔에서 다음과 같은 오류가 발생합니다 :

This dependency was not found in node_modules: 

* ./inputs 

이 작업을 받고 어떤 도움은 매우 감사합니다!

Answer 1

모듈 가져 오기는 코드가 실제로 실행되기 전에 빌드 단계에서 이미 해결되었으므로 오류가 발생하는 것으로 알고 있습니다.

가능한 모든 입력을 가져온 다음 this.schema.input.type을 기반으로 사용할 입력을 결정하면됩니다. 이런 식으로 뭔가 : 당신은 이미 선 var Inputs = require('./inputs'); 및 // let Input = Inputs[this.schema.input.type];