Почему атрибуты HTML устанавливаются по-разному в DOM? - PullRequest
Новая
       43

Почему атрибуты HTML устанавливаются по-разному в DOM?

8 голосов
/ 24 января 2020

После нескольких часов копания мы решили задать вопрос о SO, надеясь, что кто-то еще может помочь в решении следующей проблемы.

  1. Для одного из наших веб-приложений мы использовали Onsen UI js фреймворк с библиотекой поддержки React
  2. Когда мы пытаемся визуализировать приложение в наших средах разработки, кажется, что все работает правильно, но когда мы его примеряем В нашей промежуточной среде некоторые компоненты ведут себя по-разному

  3. То, что мы обнаружили до сих пор : кажется, что в нашей промежуточной среде некоторые атрибуты HTML по-разному устанавливаются в DOM: 

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

Из-за этого инфраструктура Onsen не может найти атрибуты HTML элементов и ведет себя по-разному, независимо от того, что:

  1. Мы используем один и тот же браузер (проверено с помощью Chrome, Edge, Firefox)
  2. У нас одинаковый код JS, загруженный в оба envs

Какие различия между envs:

  1. Файлы JS хранятся локально на наших компьютерах разработчиков и на S3 для нашей промежуточной среды.
  2. Мы используем зашифрованное соединение в нашей промежуточной среде
  3. Заголовок Accept-Encoding gzip, deflate на локальном и gzip, deflate, br на постановке
  4. Может быть, что-то еще искать?

Кто-нибудь знает, что, черт возьми, здесь происходит?

1 Ответ

12 голосов
/ 27 января 2020

Мы на самом деле нашли проблему, и решение довольно простое, хотя нам потребовались часы, чтобы ее найти.

В нашей рабочей среде мы используем плагин babel transform-react-remove-prop-types, чтобы лишить React prop types.

К сожалению, библиотека поддержки Onsen UI React опирается на определенные типы пропеллов своих компонентов, поэтому после их удаления библиотека начала вести себя по-другому.

Что мы сделали:

  1. Мы обновили плагин babel до версии 0.3.3, чтобы иметь возможность использовать опцию ignoreFilenames

  2. Мы пропустили файл, содержащий код React пользовательского интерфейса Onsen библиотека 

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