iXdi - Σύγχρονος προγραμματισμός

Φορτώστε το στοιχείο React JS από εξωτερικό σενάριο κατά το χρόνο εκτέλεσης

Χρησιμοποιώ το React JS + webpack. Η γενική περίπτωση που πρέπει να επιλύσω είναι η δυναμική φόρτωση στοιχείων React που δεν είχαν συνδυαστεί με την κύρια εφαρμογή. Είδος συνδεόμενων εξαρτημάτων που μπορούν να αναπτυχθούν ανεξάρτητα από την κύρια εφαρμογή και στη συνέχεια να φορτωθούν από την εφαρμογή δυναμικά, χωρίς να ξαναδημιουργηθεί ολόκληρη η εφαρμογή.

Η συγκεκριμένη περίπτωση είναι παρακάτω.

Έχω δύο εντελώς διαχωρισμένες ενότητες (δηλαδή κατασκευασμένες με χρήση διαφορετικών package.json και webpack.config.js):

  • το MainApp
  • Κάποια Component

Πρέπει να εφαρμόσω την ακόλουθη συμπεριφορά:

  1. Σελίδα με MainApp φορτωμένη και αρχικοποιημένη.
  2. MainApp δυναμική αναζήτηση για url του αρχείου .js που περιέχει Component (π.χ. κάνοντας αίτημα GET στον διακομιστή ιστού).
  3. Το MainApp φορτώνει το αρχείο .js με Component και το συμπεριλαμβάνει στη σελίδα ως <script>
  4. Το MainApp χρησιμοποιεί το φορτωμένο Component κατά την απόδοση.

Είναι δυνατή μια τέτοια περίπτωση χρήσης στο react js + webpack;

webpack reactjs node.js javascript
15.11.2016

  • Το αίτημα GET επιστρέφει ένα μεταγλωττισμένο στοιχείο; 15.11.2016
  • Επιστρέφει έγκυρο αρχείο .js, όχι .jsx (αν μιλάτε για αυτό). 16.11.2016
  • Βρήκατε ποτέ λύση για αυτό; 10.01.2017
  • Οχι. Βρήκα άλλη λύση για τη συγκεκριμένη εργασία μου, αλλά δεν λύνει γενικό πρόβλημα. Δημιουργώ στοιχεία δυναμικά από την περιγραφή json (όπως github.com/mozilla-services/react-jsonschema -φόρμα). Κάνει τα δυναμικά στοιχεία αρκετά περιορισμένα σε εμφάνιση και συμπεριφορά, αλλά είναι εντάξει για μένα 12.10.2018

Απαντήσεις:


1

Με το webpack 5 μπορείτε πλέον να το κάνετε αυτό μέσω της συνένωσης λειτουργικών μονάδων.

Η βασική ιδέα είναι ότι "εκθέτετε" τις εξαγωγές από ένα έργο για να χρησιμοποιηθούν σε ένα άλλο:

Εφαρμογή 1 (χρησιμοποιεί το κουμπί από την εφαρμογή 2)

<!-- public/index.html -->
<html>

<head>
  <!-- remote reference to app 2 -->
  <script src="http://localhost:3002/remoteEntry.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>


//app.ts
import * as React from "react";

const RemoteButton = React.lazy(() => import("app2/Button"));

const App = () => (
  <div>
    <h1>Typescript</h1>
    <h2>App 1</h2>
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  </div>
);

export default App;


//... webpack.config.js
plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      library: { type: "var", name: "app1" },
      remotes: {
        app2: "app2",
      },
      shared: ["react", "react-dom"],
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ]

Εφαρμογή 2 (εκθέτει το κουμπί)

// src/Button.ts
import * as React from "react";

const Button = () => <button>App 2 Button</button>;

export default Button;


//... webpack.config.js
 plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      library: { type: "var", name: "app2" },
      filename: "remoteEntry.js",
      exposes: {
        Button: "./src/Button",
      },
      shared: ["react", "react-dom"],
    })
  ]

Ακολουθεί ένα repo που περιέχει διάφορα παραδείγματα.

15.05.2020
  • Έχω τις ίδιες ανάγκες. Πρέπει να χρησιμοποιήσω ένα εξωτερικό αρχείο .js το οποίο περιλαμβάνει από μόνο του ένα στοιχείο react που θα χρησιμοποιηθεί σε μια κύρια εφαρμογή react. Το εξωτερικό αρχείο .js φορτώνεται δυναμικά κατά το χρόνο εκτέλεσης όταν χρειάζεται. Ρύθμισα το webpack έτσι ώστε οι εξωτερικοί να αντιδρούν και να αντιδρούν. Αλλά κάθε φορά που φορτώνεται το εξωτερικό .js, λαμβάνω το ακόλουθο σφάλμα: [Σφάλμα αναφοράς: δεν έχει οριστεί η αντίδραση]. Πώς μπορώ να επιτρέψω σε εξωτερικό αρχείο .js να παραπέμπει τις βιβλιοθήκες αντιδράσεων στην κύρια εφαρμογή; Ευχαριστώ 27.12.2020

    • 2

    Φαίνεται ότι ρωτάτε πώς να εξωτερικεύσετε το React. Εάν ναι, μπορείτε να καταχωρίσετε τις βιβλιοθήκες ως εξωτερικές στο αρχείο webpack.config.js σας:

    webpackConfig.externals = {
  "react": "React",
  "react-dom": "ReactDOM",
  ...
}
    04.02.2017
  • Πρέπει να φορτώσω στοιχείο που δεν υπήρχε κατά τη στιγμή της μεταγλώττισης (καλά, χρόνο ομαδοποίησης). Νομίζω ότι μιλάτε για αργή φόρτωση, επομένως όλα τα στοιχεία είναι ήδη γνωστά όταν η εφαρμογή είναι πακέτο. Δεν είναι το ίδιο 12.10.2018
    • Νέα υλικά
    Το Python Selenium Web Scraping σας κατέβασε το 2023; Εκκαθαρίστε την προσωρινή μνήμη και ενισχύστε τα αποτελέσματά σας!
    Η απόξεση ιστού με το Python Selenium είναι ένα εξαιρετικό εργαλείο για την εξαγωγή δεδομένων από ιστοσελίδες. Ωστόσο, περιστασιακά, οι ιστοσελίδες ενδέχεται να αποτύχουν να φορτώσουν ή να..
    Έννοιες JavaScript που πρέπει να γνωρίζετε για να ξεκινήσετε με το React
    Αφού είδα αυτή την ερώτηση να τίθεται αμέτρητες φορές, πιστεύω ότι μπορεί να είναι χρήσιμο σε πολλούς ανθρώπους εκεί έξω να έχουν μια σαφή κατανόηση του τι χρειάζεται να είναι γνωστό στο..
    Χρήση της C++ ως γλώσσας δέσμης ενεργειών, μέρος 8
    Βελτίωση κλήσεων λειτουργιών API με χρήση ενσωματωμένης συναρμολόγησης Έχω πειραματιστεί με την ενσωματωμένη συναρμολόγηση στο παρελθόν με κάποια επιτυχία. Είναι περίπλοκο και εύκολο να κάνεις..
    5 αμυχές που πρέπει να γνωρίζετε για να γίνετε σπουδαίος προγραμματιστής.
    5 αμυχές που πρέπει να γνωρίζετε για να γίνετε σπουδαίος προγραμματιστής. Αυτές τις μέρες, πολλοί φιλοδοξούν να εργαστούν ως προγραμματιστές. Αλλά το να γίνεις σπουδαίος προγραμματιστής δεν..
    Πώς να εφαρμόσετε το Deep Learning σε δομημένα δεδομένα
    Η βαθιά μάθηση είναι ένα καυτό και περιζήτητο θέμα τώρα ως μέρες. Η επιτυχία του προέρχεται από το γεγονός ότι είναι εξαιρετικά αποτελεσματικό στην επίλυση σύνθετων προβλημάτων και στην επίτευξη..
    Είναι το AI καλύτερο από τα ζώα στο να βλέπουν στο σκοτάδι;
    Τέχνη Μηχανικής Εκμάθησης Είναι η τεχνητή νοημοσύνη καλύτερη από τα ζώα στο να βλέπουν στο σκοτάδι; Τα όρια της όρασης ρομπότ στο ακραίο σκοτάδι Μελέτη της συμπεριφοράς των ζώων τη..
    Νέα δυνατότητα: Αναπτύξτε περισσότερο τον ανοιχτό κώδικα με το IssueHunt Upvotes
    Είμαστε στην ευχάριστη θέση να σας παρουσιάσουμε τη νεότερη λειτουργία μας: IssueHunt Upvote , τον τέλειο τρόπο υποστήριξης, κοινής χρήσης και παρακολούθησης του αγαπημένου σας ανοιχτού..