Dynamischer Import mit nicht gebündelter Datei

Question

Ich habe ein React-Projekt mit Webpack gebündelt.

Ich habe eine Komponente, die ich es Komponenten dynamisch rendern soll. In meinem Fall kommt der Pfad der Komponente von Requisiten.

Auch diese Komponenten sind nicht in meinem Projekt .js-Datei gebündelt; Sie sind externe React-Komponenten/Bibliotheken.

ich das Dynamic ES6 Import versucht haben:

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 }); 
      }) 
    } 
} 

Dies funktioniert nicht, da Import eine statische Route benötigt.

Dann habe ich versucht, mit erfordern:

let dynamicComponent = require(cardType); 

Welche weil nicht funktioniert (ich nehme an) Webpack versucht, es in das Hauptbündel zu finden.

Ist das überhaupt möglich?

aktualisieren: Es sieht aus wie das funktionieren kann (cardtype ist 'index.js' - eine Komponente Reagieren):

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

Webpack schafft ein anderes Bündel (chunk) einschließlich des Codes von index.js und all seine Abhängigkeiten.

Aber das löst nicht wirklich meine ursprüngliche Frage.

Bearbeiten 2: Der Import von oben ignoriert tatsächlich die letzte var und Webpack macht Chunks jeder Datei in/lib.

Answer 1

Ich kam schließlich mit einer Lösung.

LoadJS Bibliothek. Sie können $script auch verwenden.

Bibliotheksprojekt (externe Komponenten): index.js:

import App from './App'; 

export const MyComponentLib = { 
    App 
}; 

App.jsx:

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> 
    ); 
    } 
} 

In der webpack Konfigurationsdatei Bibliothek (Produktion), fügte hinzu:

libraryTarget: 'umd', 

Hauptprojekt Datei (main.js):

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

     // Getting all asyncCards from state 
     let currentCards = cloneDeep(this.state.asyncCards); 

     // Immutable "get" function - getting cards from nextProps 
     nextProps.pagesData.get('cards').forEach(card => { 

      // Getting card_type, which in this case is the filename 
      let cardType = card.get('card_type'); 

      // Do we have this card already in the state object? 
      if(!hasIn(currentCards, cardType)) { 

       // AsyncLoading the card file 
       loadjs(`/custom/1/${cardType}.js`, cardType, { 
        success:() => { 

         // Cloning App function (the component) 
         currentCards[cardType] = window.MyComponentLib.App.bind({}); 

         this.setState({ 
          asyncCards: currentCards 
         }) 
        } 
       }) 
      } 
     }) 
    } 
}