Как использовать модули ES6 из консоли инструментов разработчика

Question

Насколько я понимаю, если я создаю модуль ES6, я могу импортировать его только из кода, который сам является модулем.Это означает, что немодульный код, т.е. встроенный Javascript или консоль инструментов разработчика Chrome, никогда не сможет получить доступ к коду, находящемуся в модуле.

Это правда?Есть ли способ обойти это, потому что это кажется довольно серьезным ограничением.

Answer 1

Вы можете использовать динамический импорт в консоли Chrome.

import('path/to/module.js').then(m => module = m)

// [doSomething] is an exported function from [module.js].
module.doSomething()

Answer 2

Вы можете зарегистрировать функцию или переменную в глобальном пространстве имен с помощью строки типа window.myFunction = myFunction или window.myVariable = myVariable.Вы можете сделать это в модуле, где объявлены myFunction или myVariable, или сделать это в отдельном модуле, в который они были импортированы.

Как только вы это сделаете, вы сможете использовать myFunction и myVariable с консоли Chrome DevTools.

Например:

import myModule from '/path/to/module.js';
window.myModule = myModule;

// in the console:
myModule.foo();

(Благодарим @Evert за предоставление этого решения в комментарии, хотя и довольно окольным образом, чтоМне понадобилось время, чтобы понять.)

Answer 3

Вы можете импортировать модуль только из других модулей, потому что import является функцией модулей.

Как вы «импортировали» перед модулями ES6?Вы не сделали, потому что этого не было.В действительности вы можете взаимодействовать с модулем E6 так же, как вы использовали взаимодействие между двумя независимыми немодульными сценариями.