Я использую модули ES6 в своем приложении JavaScript. Источники скомпилированы с помощью webpack и babel. Это сокращенная версия файла, которая вызывает у меня проблемы:
export const JUST_FORM = 0;
export const AS_PAGE = 1;
console.log(AS_PAGE); // **
export default function doSomething(mode = AS_PAGE) {
console.log(mode);
console.log(JUST_FORM);
}
Я использую эту функциональность так же, как вы ожидали.
import doSomething, { AS_PAGE } from './doSomething'
console.log(AS_PAGE);
doSomething();
Когда я запускаю приложение, он печатает три раза undefined
и только после ожидаемого значения AS_PAGE
, которое является console.log
, помеченным **
. Однако это напечатано последним! Он показывает, что:
- Константа
AS_PAGE
, когда используется как параметр по умолчанию для функцииdoSomething
, не определяется в момент определения функции. - Константа
JUST_FORM
не определяется при вызовеdoSomething
. - Константа
AS_PAGE
не определена при явном импорте.
По-видимому, здесь происходит то, что только экспорт default
обрабатывается и оценивается, а остальная часть файла игнорируется до следующего. Я импортирую этот файл в несколько разных мест в моем приложении (который в настоящий момент довольно велик), и в какой-то момент эти значения становятся фактически доступными. Судя по выводам консоли, это вопрос времени, но вполне возможно, что у него есть другая причина. Очевидно, что я импортирую точно так же во всех местах.
В любом случае, я написал все свое приложение с предположением, что как только я что-то импортирую, он сразу же доступен, и я могу использовать его в своем коде. Я прочитал (кратко) о том, как модули ES6 должны работать, и я не нашел ничего, что могло бы доказать, что это предположение неверно. И он работает до сих пор.
Также обратите внимание, что поведение такое же, когда я запускаю его с помощью webpack-dev-server
или скомпилировал его в один пакет.
Действительно ли это поведение? Что может быть причиной этого?