Schreiben eingebetteten Javascript-plugin, Reagieren & Webpack

Ich möchte in der Lage zu bündeln, Reagieren meine app mit Webpack, so dass verteilte Kopien auf ein CDN bezogen werden können, aufgerufen und initialisiert mit ein paar config relevant für einen client.

Nach der Lektüre diese und diese, ich werde mein webpack Eintrag Datei wie folgt:

//... React requires etc.

(() => {
  this.MyApp = (config) => {
    //some constructor code here
  }

  MyApp.prototype.init = () => {
    ReactDOM.render(<MyReactApp config={MyApp.config} />, someSelector);
  }
})();

Die Idee, dass in meinem client, ich kann etwas tun, wie die folgenden:

<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.init({
    some: "config"
  });
</script>

Und meine MyApp#init Funktion machen wird, Reagieren meine app in einige container auf dem client.

Bin ich über dieses denken in der richtigen Weise? Gibt es eine einfachere oder effizientere Weg zu gehen über diese?

Mein Fehler ist Uncaught TypeError: Cannot set property 'MyApp' of undefined, da this im inneren des IIFE ist undefined. Ich würde wirklich gerne verstehen, warum dies geschieht und Ratschläge, wie, um es zu beheben.

Vielen Dank im Voraus!

InformationsquelleAutor mattsch | 2016-05-15
  1. 33

    So, ich habe irgendwie eine Lösung gefunden, um diese, wie beschrieben, hier

    Wenn ich meine webpack.config.js - Datei fügen Sie die folgenden Attribute, die der output Objekt, d.h.

    var config = {
  //...
  output: {
    //...
    library: 'MyApp',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  }
}

    Dieser gibt die Datei an, ich bin die Bündelung mit webpack als UMD-Modul, also wenn ich eine Funktion in dieser Datei, und exportieren es...

    export const init = (config) => {
  ReactDOM.render(<MyReactApp config={config} />, someSelector);
}

    Kann ich dann in meinem client, tun die folgende.

    <script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
  MyApp.init({
    some: "config"
  }); 
</script>

    Und meine Reagieren app rendert.

    Wenn jemand denkt, das ist eine alberne Art und Weise, es zu tun, ich würde es gerne hören!

    • Hi, mattsch. Dies ist eine schöne Lösung. Die einzige Frage, die ich habe, ist, wie könnte ich überprüfen, ob das widget integriert ist, die auf Kunden-website. Also lassen Sie uns sagen, ein app und erstellen Sie ein widget. Ich würd check-in app, die einige Benutzer (id oder Hostnamen) für embedded-widget auf Ihrer Website.
    • Ich denke, als Teil einer init Funktion, die Sie könnte ping eine Anfrage zurück, um Ihre server mit den details der client -, dass funktionieren könnte?
    • Ich dachte darüber nach, aber diese Lösung erlaubt mir nicht, prüfen Sie, ob client gelöscht, ein widget von Ihrer website. So, mit Rückruf konnte ich das nur prüfen widget ist integriert, aber nicht entfernt
    • ist das noch der Ansatz, den Ihr mit ? Alle Probleme, die Sie konfrontiert? Oder funktioniert es wunderbar
    • wir sind immer noch mit diesem Ansatz, und es ist nicht das, was uns alle Probleme, die wir kennen.
    • Was passiert, wenn ich mich mit einigen Drittanbieter-Elemente in meine reagieren widget? würde Sie ein Leck Stil, der zu der übergeordneten Seite, wo das widget eingebettet ist?
    • Ich denke, es würde davon abhängen, wie Sie verwaltet Ihre Stile. Zum größten Teil verwenden wir CSS-Module mit Reagieren, so "undicht" Stile der anderen Komponenten auf der Seite ist nicht wirklich ein Problem.

    InformationsquelleAutor mattsch
  2. 0

    Sie haben Gehäuse um Ihre Klasse.

    Anwendung exportiert werden soll oder Sie an den globalen window-Objekts, bevor Sie nennen mag.

    In Ihrer situation, die Sie eigentlich nicht aufrufende Anwendung.init() aber Sie sind Aufruf-Fenster.MyApp.init(), sondern global im Fenster Objekt nicht Objekt MyApp attached to it.

    //... Simple attaching MyApp to the window (as a function)
window.MyApp = (config) => {
  ...
}

//... Using class and export
class MyApp {
  constructor(config){...}
}
export default MyApp

//or simply attach to the window
window.MyApp = MyApp

    Ich würde es bevorzugen, erstellen von Klassen-und export-Modul export. Erstellen Sie eine Datei nur zum anfügen an das Fenster. Da es nicht als best practice zu befestigen Klassen, um das Fenster wie die.

    //Import module and attach it to the window
import MyApp from '.my-app'
window.MyApp = MyApp

    Können Sie für erweiterte Optionen des Export-Module wie UMC, AMD...

    InformationsquelleAutor Marcel Mandatory
Schreibe einen Kommentar