Вернитесь на неделю назад, когда новая версия проекта компании А была только что разработана и выпущена после ожидания завершения тестирования. В это время я тоже готовился выйти из интенсивного состояния разработки на много дней подряд, думая, что смогу немного расслабиться. И я не знал этого в то время,Я собираюсь столкнуться с мощным игроком-жуком, и я не знаю, буду ли я сражаться с этим багом много раз.. Конечно, мы можем видеть эту статью, а это значит, что я наконец-то решил эту ошибку, и процесс довольно замечательный. Какой? Если вы мне не верите, позвольте мне провести вас через этот опыт «взлетов и падений».
дружеское напоминание: Следующая статья может быть немного длинной, но я надеюсь, что вы сможете продолжить чтение. Я считаю, что некоторые из моих мыслей в процессе устранения этой ошибки натолкнут вас на некоторые мысли.Конечно, я также надеюсь, что вы, как и я, сможете получить новые знания в этом процессе и накопить некоторый опыт для устранения подобных ошибок в будущем.. Ладно, хватит разговоров, давайте начнем.
Введение в проект
Во-первых, давайте кратко представим проект A, основанный наVueПроект фреймворка, проект также используетVue CLIэтот инструмент разработки. Этот проект необходимо интегрировать в другие приложения, то есть страницу необходимо просматривать и использовать в приложении. Этот проект находился в разработке задолго до того, как я возглавил его.Поэтому версии некоторых библиотек зависимостей и библиотек инструментов в проекте относительно невелики, что также добавляет некоторые сложности моему последующему процессу отладки и устранения ошибок.
ОШИБКА
После того, как разработка была завершена, она была передана нашим тестировщикам и родственным студентам в другом городе для проверки и принятия функций, разработанных на этот раз. На нашей стороне все нормально, а на тестовой стороне обратной связи нет. Но его нашли на айфоне одноклассника Сяо С в другом городе.белый экран, после открытия страницы ничего нет.
Обнаружив эту проблему, я снова проверил с нашими одноклассниками, чтобы узнать, была ли эта проблема на тестируемом нами iPhone с системой iOS. После проверки и тестирования было установлено, что несколько айфонов на нашей стороне не имеют проблем. Затем я спросил Сяо С, какая версия системы у тестового телефона, которую он использовал.iOSВерсия системы связана.
Сяо С отзывает, что его iPhone6S Plus, то версия системы11.1.2. Я спросил, какую версию iPhone мы использовали для теста, и в отзыве о тесте было сказано, что версия системы12Над. Итак, поехали,Я уверен, что появление этой ошибки белого экрана должно быть связано с системой iPhone..
Дорога для воспроизведения ошибки
Хотя есть проблема, что есть окружение, а потому вокруг меня нет системы.11iPhone, поэтому попытка воспроизвести проблему становится проблемой. Спрашивал у коллег, у всех версия системы вообще выше12, поэтому заимствование чужого мобильного телефона для отладки пока нецелесообразно.
При нормальной разработке, если веб-страница находится вiOSЕсли есть какие-то проблемы в приложении системы, мы обычно передаемSafariбраузер для отладки. А потому что айфон с проблемой в этот раз не со мной, и телефона с такой же системой на моей стороне нет. Поэтому отлаживать через реальную машину невозможно. тогда что нам делать? Эту проблему надо решить,Я также считаю, что пути лучше, чем трудности.
Самый простой способ отладки для меня - иметь систему, которая11мобильный телефон айфон. Поэтому я искал, есть ли способ установить его на iPhone.11система. А поиск действительно есть, и процесс не очень сложный. Но один из шагов — перейти на некоторые форумы или сторонние веб-сайты помощников, чтобы загрузить тот, который соответствует вашей модели мобильного телефона.iOSСистема, этот шаг заставляет меня чувствовать себя немного неуверенно.Ведь он не официальный и не может гарантировать безопасность. а может и не быть версии11система. Так что от этого плана временно отказались.
В процессе поиска я обнаружил, что некоторые пользователи сети сказали, что они могут использоватьXcodeУстановите соответствующую версию системы iPhone模拟器для отладки. Эй, почему я не подумал об этом? Это действительно хороший способ. Потому что я узнал от коллег в компании раньшеSwift, тоже понялXcodeнекоторые операции.Вдруг я чувствую, что это действительно слишком много навыков, вы не знаете, когда вы будете использовать знания, которые вы узнали. Так что, если возможно, узнать больше. Эм, немного не в тему.
Установить Xcode
Я включил компьютер компании и начал установкуXcode, но обнаружили, что версия компьютерной системы компании слишком низкая, установитеXcodeНужно обновить систему, поэтому нет возможности сначала обновить систему. Поскольку время обновления относительно велико, я думаю, что установил его на свой компьютер Mac дома.Xcode, поэтому я решил пойти домой в первую очередь. Оставив компьютеры компании для медленного обновления.
Вернувшись домой, я начал готовиться к отладке, не говоря ни слова, но обнаружил, что мойXcodeСистемная версия вышеупомянутого симулятора iPhone также12Выше я проверил информацию,XcodeВозможна установка симуляторов разных версий системы, поэтому я установил версию системы11симулятор. Этот процесс требует, чтобы мы открылиXcodeпредпочтения, то вComponentsВ параметрах выберите загрузку эмулятора соответствующей версии системы, которую вы хотите установить.
После успешной установки запуститьiPhone 6S Plusэмулятор, используя эмуляторSafariОткрываю адрес страницы h5, а там действительно белый экран.
Демо, я наконец воспроизвел эту проблему, так что это недалеко от решения этой ошибки. я открываюMacизSafariБраузер, войдите в режим разработчика и найдите следующую ошибку
Я искал эту ошибку и обнаружил, что это произошло из-за того, что проект использовал...Оператор распространения ES6, затемiOS 11Система не поддерживает этого оператора. Так легко найти проблему, счастлив. Подумав, эту проблему лучше решить, можно использоватьBabelНекоторые плагины легко решают эту проблему. Потом я радостно заснул, подумав, что эта проблема не большая проблема, просто завтра займусь ею.
Установить предварительную версию технологии Safari
Я приехал в компанию на следующий день, и я был в проектеbabelСоответствующий плагин добавлен в конфигурационный файл
{
... // 省略原来的配置内容
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
Затем опубликуйте в тестовой среде. Я сказал своему однокласснику C, чтобы он еще раз протестировал его, и я тоже жду хороших новостей об устранении этой ошибки. но,это плохие новости, Xiao C ответил мне, что это все еще невозможно. Что, нельзя, сразу комп компа тестирую еще раз. Когда я использую корпоративный компьютерSafariСистема отладкиiOS 11изiPhone 6S PLusЗапустив симулятор, я обнаружил следующее:审核警告：“data-custom”太新，无法在此检查的页面上运行
Я снова искал, почему возникает эта проблема, и, наконец, нашел ее.Отвечать,SafariбраузерWeb InspectorИнженер тоже сказал, что это баг, но они его исправили, и новую версию можно нормально использовать в следующем релизе.SafariБраузер для отладки старыхiOSСимулятор системы. я знаю эту версиюSafariОтладка не может быть смоделированаiOS 11системная страница. Я немного расстроен, могу ли я сейчас пойти домой и взять свой компьютер 😂? Когда я думал о том, как его решить, я обнаружил, что в приведенном выше ответе упоминаетсяSafari Technology Preview,SafariПредварительный просмотр технологии.
У меня появилась небольшая надежда, когда я увидел имя, поэтому я искалSafari Technology Previewчто. а затем обнаружил, что это относительноSafariкакChromiumотносительноChromeДа, они эквивалентны разрабатываемой версии браузера.
На данный момент я думаю, что можно использоватьSafari Technology Previewдля отладки. так скачайSafari Technology Preview, когда я открываюSafari Technology PreviewЗатем после входа в режим разработчика обнаруживается, что его действительно можно отлаживатьiOS 11системная страница. Потом посмотрел, почему экран до сих пор белый. Выяснилось, что произошла та же ошибка, что и в прошлый раз:
То есть эта проблема не решена, потому что упакованный код неSourceMap, поэтому, если вы хотите увидеть более подробные сообщения об ошибках, вам необходимо выполнить локальную отладку. в местной средеSourceMapДа, вы можете найти более подробную информацию об ошибке.Я запустил проект локально, а затем открыл сведения об ошибке в консоли и обнаружил, что проблема связана с использованием сторонней библиотеки.
До сих пор здесь можно объяснить, что приведенное выше мы использовалиBabelПлагин не поддерживает эту стороннюю библиотеку, так что теперь наша проблема выглядит так:Как решить проблему, которая появляется в сторонней библиотеке...Оператор распространения не компилируется в синтаксис ES5.
Компилировать синтаксис ES6 в сторонних библиотеках
Просмотр связанных методов настройки в Vue CLI
Потом я присмотрелсяVue CLIсоответствующие документы, обнаружили, что действительно вСовместимость с браузеромВ этой главе упоминаются некоторые методы обработки. Получается, что код, который мы написали в проекте, поможет нам преобразовать его в синтаксис ES5 по умолчанию, но если сторонняя библиотека зависит от потребностей проектаpolyfillЕсли это так, нам нужно настроить его вручную.Видел здесь, я чувствую приближение рассвета.
Я начал пробовать эти три метода. Я нашел первый метод относительно простым и легким в настройке. Поэтому я попробовал первый способ. в проектеvue.config.jsДобавьте следующую конфигурацию в:
... // 省略的配置
transpileDependencies: [
'module-name/library-name' // 出现问题的那个库
],
... // 省略的配置
Перезапустив проект, когда я уже собирался аплодировать грядущему успеху, консоль неожиданно выдала следующую ошибку:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
Эта ошибка находится вChromeКонсоль браузера появляется, потому что проект откроется первым после его повторного локального запуска.Chromeбраузер. Действительно, проблема не решена, а возникла новая проблема. Затем, после повторного запроса данных, я обнаружил, что это произошло из-за того, что эта сторонняя библиотека былаCommonJSбиблиотека типов, аBabelОбработка по умолчаниюES6изmoduleбиблиотека типов, так что здесь возникает новая проблема.
Первый метод сталкивается с препятствиями и делает паузу на некоторое время. Я собираюсь продолжать пробовать следующие два метода.Однако, поскольку последние два метода немного изменились по сравнению с исходным проектом, я сразу передалVue CLIСоздал новый проект вpackage.jsonДобавьте зависимость стороннего пакета, используемого в проекте, и используйте инструмент управления пакетами компании для установки зависимости.. Затем запустив проект, открыв консоль, обнаружил ту же ошибку. Но открыв подробности, я обнаружил, что путь ошибки не соответствует моему исходному проекту. Затем я решил попробовать на этот раз и продолжил использовать первый метод, чтобы посмотреть, сработает ли он. Затем скопировал имя пакета неправильного пути, вvue.config.jsСледующий код конфигурации добавляется в соответствующее место в файле:
... // 省略的配置
transpileDependencies: [
'module-name-new/library-name-new' // 出现问题的那个库
],
... // 省略的配置
Затем повторно запустите проект и убедитесь, что он работает.Ах, это так. Почему я не могу сделать это в своем исходном проекте?Я посмотрел на зависимости исходного проекта и зависимости нового тестового проекта и обнаружил, что ихvue, babelВерсия намного хуже. Я предполагаю, что это может быть по этой причине. Но сейчас точно нельзя опрометчиво обновлять версии этих зависимостей, потому что для решения этой проблемы не стоит терять и снова приносить новые проблемы.
Другой вопрос, почему одна и та же сторонняя библиотека имеет разные пути ошибок в исходном проекте и текущем проекте. И похоже, что используются две разные сторонние библиотеки. Оставьте неизвестность здесь, я объясню в более поздней статье.
Далее я начал продолжать пробовать оставшиеся два метода в тестовом проекте, для второго метода, потому что старый проект использовалpresetsда нетpolyfillsДля этого варианта конфигурации я не знаю об этой сторонней библиотеке, которая до сих пор пошла не так, за исключением этого...Существуют ли какие-либо зависимости, кроме оператора распространения объекта. Поэтому я пока отказался от этого метода.
Что касается третьего метода, я думаю, что могу попробовать его.Сначала я вручную понижаю некоторые ключевые зависимости в тестовом проекте, а затем следую шагам третьего метода выше, чтобы использовать его в тестовом проекте. Но после того, как тестовый проект найден для запуска, он предлагает установитьcore-js,Установитьcore-jsПосле этого выдавало ошибку, снова предлагая установитьes.module.regex.matchДождитесь множества зависимостей, продолжайте проверять информацию и обнаружите, что нужно поставить конфигурацию вuseBuiltInsМодификация, но поскольку я взял на себя этот проект, это старый проект, полагаться на более неопределенные модификацииuseBuiltInsНовая проблема появится после параметров конфигурации. Так что не смейте опрометчиво изменять параметры конфигурации, поэтому временно отказались от этого подхода.
Я думал об этом позже,...Это новый синтаксис оператора расширения. не может пройти некоторыеpolyfillsрешать. нужноBabelСкомпилируйте этот синтаксис, прежде чем его можно будет использовать в более ранней версии системы, поэтому решение состоит в том, чтобы позволитьBabelСнова скомпилируйте библиотеку.
Найдите новые прорывы
Когда он добрался сюда, казалось, что выхода нет. Какое-то время мне казалось, что этот жук меня победит, и мне казалось, что я слышу его беспощадные насмешки».Молодой человек, я вас замучил, что вы вышли из себя? Хахаха. . ."
Однако он видит, что я ошибаюсь, и чем сложнее исправить ошибку, тем больше я в ней заинтересован. Поэтому я решил хорошенько взглянуть на свои мысли и подготовиться к новому отплытию.
Я обнаружил, что первый подход действительно работал, только потому, чтоCommonJSтип, нужно бытьES6 moduleТип. Поэтому я решил начать с этого места, поэтому я решил поискать соответствующую информацию, взглянуть наBabelЕсть ли способ справиться с этим?CommonJSмодуль, который может обрабатыватьES6 moduleА модули?Наконец, тяжелая работа окупается, я узналBabelесть такая конфигурацияsourceType, еслиsourceTypeУстановить какunambiguousможет решить эту проблему.
такBabelбудет зависеть от того, имеет ли файл модуляimport/exportчтобы решить, какой способ разбора модулей использовать. Поэтому я снова использовал первый метод, вvue.config.jsдобавлено вtranspileDependenciesвариант конфигурации, затем в проектеBabelВ файл конфигурации добавляется следующая конфигурация:
module.exports = {
... // 省略的配置
sourceType: 'unambiguous',
... // 省略的配置
};
Его можно найти,Радость успеха приходит снова в этот момент. Затем я снова упаковал его, снова развернул код в тестовой среде и поспешно попросил Xiao C протестировать его снова, и обнаружил, что это действительно возможно. Ой, наконец-то решил эту проблему. Наконец-то я могу вздохнуть с облегчением, хахаха. . . Демо, почему меня так сложно достать?
Однако, когда я внимательно прочитал установку этой опции наunambiguous, я нашел некоторые проблемы. Потому что в этом случае есть некоторый риск, потому что даже если вы не используетеimport/exportЭти модули утверждений также могут быть полностью действительными.ES6 module, так что могут быть некоторые неожиданные ситуации.Что мне делать, кажется, у меня застрял в шее жук, когда я не обращал внимания.
Я чувствую, что Бог всегда шутит надо мной, когда я выпрыгиваю из ямы, думая, что опасности нет. Внезапно передо мной появилась еще одна дыра, и я снова провалился в нее, сам того не заметив. Я чувствую, что раз я пришел сюда, я должен продолжать идти, и должен быть способ оптимизировать проблемы, с которыми я сталкиваюсь сейчас. я еще раз внимательно посмотрелBabelДокумент с инструкциями по настройке, на этот раз я подумал, был ли я правBabelПросто будьте более знакомы с ним.Все в порядке, продолжай пытаться. Наконец, я, кажется, вижу некоторые удивительные варианты конфигурации.
я здесьConfig Merging optionsнайти вoverridesвариант, не этот ли вариант конфигурации именно то, что мне нужно? Я могу использовать этот параметр конфигурации для использования необходимых мне сторонних пакетов.unambiguousМетод обработки, а затем другие сторонние библиотеки не могут быть обработаны предыдущим способом. Хахаха, я такой гений, я сказал себе это в глубине души 😂.
Так что только в проектеbabel.config.jsПросто напишите следующую конфигурацию:
module.exports = {
... // 省略的配置
overrides: [
{
include: './node_modules/module-name/library-name/name.common.js', // 使用的第三方库
sourceType: 'unambiguous'
}
],
... // 省略的配置
};
Кстати, есть еще одна вещь, о которой не было сказано, и именно поэтому я скачал ее с помощью упомянутого выше собственного инструмента управления пакетами компании.node_modulesЗа названием пакета следует использование официальногоnpmИмя пакета, загруженного средством управления пакетами, несовместимо. Причина в том, что инструмент управления пакетами, используемый компанией,cnpmМодифицированная версия . и потому, чтоcnpmДля увеличения скорости загрузки используйтеcnpm/npminstall, поэтому имена загруженных пакетов сбивают с толку.Подробнее см.здесь.
Это конец цветка, подытожим:Причина белого экрана в том, что пакет используемой сторонней библиотеки использует...оператор распространения, потому что сторонний пакет по умолчанию не являетсяBabelобработано, поэтому не поддерживается...изiOS 11В системе появляется белый экран. Решение состоит в том, чтобы датьvue.config.jsв файле конфигурацииtranspileDependenciesДобавьте имя рассматриваемого пакета в параметры конфигурации.. Конечно, если проект относительно старый, возможно, с ним тоже нужно будет обращаться так же, как написано в статье.
Процесс устранения этой ошибки похож на апгрейд и борьбу с монстрами.Продолжайте терпеть неудачи, продолжайте пытаться, пока вы не сдаетесь, однажды вы добьетесь успеха. Если вы настаиваете на том, чтобы это увидеть, значит, вы тоже молодец. В сегодняшнюю эпоху информационного взрыва хорошо иметь возможность придерживаться длинной статьи.
Немного размышлений и размышлений: В ходе этого процесса я также обнаружил, чтоBabelа такжеVue CLIНа самом деле не так хорошо, если бы я был более опытным с ними, мне потребовалось бы меньше времени, чтобы исправить эту ошибку. Конечно, еще не поздно выучить их и сейчас.С учебным отношением процесс решения этой ошибки на этот раз является моим опытом решения других подобных ошибок в будущем. Также наберитесь терпения в процессе решения багов, и конечно научитесь отпускать неверное направление после попытки.
Написание этой статьи заняло у меня много времени, и если вы что-то приобрели или чему-то научились, вы можетеЛайк, ретвит, избранноеВозьми волну, эта просьба не должна быть чрезмерной, верно?
Если у вас есть какие-либо замечания и предложения по этой статье, вы можете оставить сообщение прямо под статьей, или вы можетездесьПредложенный. Вы также можете обратить внимание на мой публичный номерГуаньшань не сложно пересечь, чтобы получить больше практических знаний о внешнем интерфейсе, давайте усердно работать, чтобы добиться прогресса вместе.