コンポーネントを動的にインポートする方法

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）。このような何か：

const allInputs = { 
    text: require('./inputs/text'), 
    number: require('./inputs/number'), 
} 

const inputToUse = allInputs[this.schema.input.type] 

すでに線でvar Inputs = require('./inputs');と// let Input = Inputs[this.schema.input.type];