Я начал использовать es2015 с babel в последнем проекте. Когда я пытаюсь выполнить import или export внутри условия if, у меня есть ошибка 'import' and 'export' may only appear at the top level. Я вижу много случаев для этого, и он хорошо работает с require, но не с модулями es2015. Есть ли причина для этого ограничения?
Почему декларации экспорта/импорта должны быть на верхнем уровне в es2015?
Ответ 1
JavaScript выполняет статический анализ модулей ES6. Это означает, что вы не можете динамически выполнять импорт или экспорт. Подробнее читайте в разделе 4.2 этой статьи:
Статическая структура модуля означает, что вы можете определять импорт и экспорт во время компиляции (статически) - вам нужно только посмотреть исходный код, вам не нужно его выполнять.
Существует много причин для этого подхода, некоторые из которых предназначены для подготовки JavaScript для будущих функций, которые полагаются на возможность статического анализа исходного файла, а именно макросов и типов (обсуждаемых в вышеупомянутой статье).
Еще одна интересная статья в этом разделе описывает циклические зависимости и быстрый поиск в качестве причин.
______
Если вы хотите выполнить export внутри некоторого вложенного блока модуля, пересмотреть, как вы пишете модуль и выставляете его API/внутренности, поскольку это почти не нужно. То же самое происходит, если вы в настоящее время require встроенных модулей внутри вложенных блоков кода ES5. Почему бы не require/import в верхней части вашего модуля и не использовать их API/внутренние элементы внутри вложенных блоков? Основное преимущество этого подхода, по крайней мере, с точки зрения удобочитаемости, заключается в том, что вы можете знать зависимости модуля без необходимости сканировать его источник для вызовов require.