Warum werden HTML-Attribute im DOM anders festgelegt?

8

Nachdem wir einige Stunden gegraben hatten, beschlossen wir, eine Frage zu SO zu stellen, in der Hoffnung, dass jemand anderes in Bezug auf das folgende Problem helfen könnte.

  1. Für eine unserer Webanwendungen haben wir das Onsen UI js Framework mit seiner React-Unterstützungsbibliothek verwendet
  2. Wenn wir versuchen, die Anwendung in unseren Entwicklungsumgebungen zu rendern, scheint alles ordnungsgemäß zu funktionieren, aber wenn wir es in unserer Staging-Umgebung versuchen, verhalten sich einige Komponenten anders

  3. Was wir bisher gefunden haben : Es scheint, dass in unserer Staging-Umgebung einige HTML-Attribute im DOM unterschiedlich festgelegt sind:

    |----------------|---------------|--------------|
| HTML attribute |    DEV ENV    | STAGING ENV  |
|----------------|---------------|--------------|
| fixed-content  | fixed-content | fixedcontent |
|----------------|---------------|--------------|
| active-index   | active-index  |     index    |
|----------------|---------------|--------------|

Aus diesem Grund kann das Onsen-Framework die Attribute in den HTML-Elementen nicht finden und verhält sich unabhängig davon anders:

  1. Wir verwenden denselben Browser (überprüft mit Chrome, Edge, Firefox)
  2. Wir haben den gleichen JS-Code auf beiden Envs geladen

Welche Unterschiede gibt es zwischen envs:

  1. Die JS-Dateien werden lokal auf unseren Entwicklungsmaschinen und auf S3 für unsere Staging-Umgebung gespeichert.
  2. Wir verwenden eine verschlüsselte Verbindung in unserer Staging-Umgebung
  3. Der Accept-Encoding-Header befindet sich gzip, deflatelokal und gzip, deflate, brim Staging
  4. Vielleicht etwas anderes zu suchen?

Weiß jemand, was zum Teufel hier passiert?

javascript html reactjs onsen-ui Mihai Matei
quelle
Verwenden Sie zufällig die React-Version mit der Angular- oder Basis-JS-API? Da die JS- und die Winkelversion scheinbar festen Inhalt als Attribut verwenden, verwendet die React-Version renderFixed als Attribut. Oder verwenden Sie es richtig und das Reactjs-Tag dieser Frage ist nur irreführend?
Shilly
Onsen ui hat also einen reinen js-Kern mit einer Reaktionsbibliothek darüber. Wir verwenden diese 2 in unserer App
Mihai Matei
Stellen Sie den Attributen ein Präfix voran data-*?
Brett Gregson
Nein. Eigentlich erledigt das Onsen-UI-Framerwork alles, aber soweit ich gesehen habe, verwenden sie keine Datensätze
Mihai Matei

Antworten:

12

Wir haben das Problem tatsächlich gefunden und die Lösung ist recht einfach, obwohl wir Stunden gebraucht haben, um es zu finden.

In unseren Staging- / Produktionsumgebungen verwenden wir das Babel-Plugin transform-react-remove-prop-types, um die React-Requisitentypen zu entfernen.

Leider stützt sich die Onsen UI React-Unterstützungsbibliothek auf die definierten Requisitentypen ihrer Komponenten. Als sie entfernt wurden, begann sich die Bibliothek anders zu verhalten.

Was wir gemacht haben:

  1. Wir haben das Babel-Plugin auf die Version aktualisiert 0.3.3, um die ignoreFilenamesOption nutzen zu können

  2. Wir haben die Datei übersprungen, die den Code der Onsen UI React-Bibliothek enthält

    if (cli.production) {
    config.babel.plugins.push([
        'transform-react-remove-prop-types',
        {
            ignoreFilenames: ['projectleader']
        }
    ]);
}
Mihai Matei
quelle