バンドルされていないファイルを使用した動的インポート

Question

WebpackにバンドルされたReactプロジェクトがあります。

コンポーネントを動的にレンダリングしたいコンポーネントがあります。私の場合、コンポーネントのパスは小道具から来ています。

また、これらのコンポーネントは、プロジェクトの.jsファイルにバンドルされていません。彼らは外部のReactコンポーネント/ライブラリです。私はダイナミックES6のインポートを試みた

：

componentWillReceiveProps(nextProps){ 
    if(nextProps.pagesData && this.props.pagesData !== nextProps.pagesData && nextProps.pagesData.get('cards').count() > 0){ 

     // Getting the first card from the Immutable object 
     let card = nextProps.pagesData.getIn(['cards', 0]); 

     // Getting the cardType which can be: '/path/index.js' 
     let cardType = card.get('card_type'); 

     // ES6 Dynamic import 
     import(cardType) 
      .then(module => { 
       this.setState({ asyncCard: module.default }); 
      }) 
    } 
} 

インポートは、スタティックルートが必要なので、これは動作しません。

その後、私が試したが必要です。（私は仮定）のWebPACKはメインバンドルにそれを見つけようとするので、動作しません

let dynamicComponent = require(cardType); 

。

これも可能ですか？

更新：これは働くことができるように見えます（CARDTYPEは 'index.js' です - リアクトコンポーネント）：

import(`/home/user/_apps/module/react-module/lib/${cardType}`) 

のWebPACKはindex.jsのコードを含むさまざまなバンドル（チャンク）を作成しますすべての依存関係です。

しかし、これは私の元の質問を本当に解決するものではありません。

編集2：上記のインポートは実際には最後のvarを無視し、Webpackは/ lib内のすべてのファイルのチャンクを作成します。

Answer 1

私はついに解決策を思いつきました。

LoadJSライブラリー。 $scriptも使用できます。

ライブラリプロジェクト（外部部品）： index.js：

import App from './App'; 

export const MyComponentLib = { 
    App 
}; 

App.jsx：ライブラリのWebPACKの設定ファイル（生産）で

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

export default class App extends Component { 
    render() { 
     return (
     <div className="App"> 
      <header className="App-header"> 
       <img src={logo} className="App-logo" alt="logo" /> 
       <h1 className="App-title">Welcome to React</h1> 
      </header> 
      <p className="App-intro"> 
       To get started, edit <code>src/App.js</code> and save to reload. 
      </p> 
     </div> 
    ); 
    } 
} 

、コメントを追加しました：

libraryTarget: 'umd', 

メインプロジェクトファイル（main.js）：