Блог

В script1.js , у меня есть следующие экспортные:

 export function test1() {
  // do something
}

export function test2() {
  // do something
}
 

Я импортирую script1.js в script2.js:

 import * as functions from './script1.js';

functions.test1();
functions.test2();
 

Мне интересно, есть ли способ импортировать все модули из script1.js , и непосредственно помещать их внутрь глобальных переменных script2.js . Таким образом, я могу напрямую обращаться к ним с помощью test1(), test2(), без промежуточного этапа помещения их в объект.

Я знаю, что мы можем сделать import {test1, test2} from './script1.js'; , но если у меня будет много экспорта, то деконструкция будет утомительной.

Другими словами, то, что я ищу, является чем-то эквивалентным:

 import * from './script1.js';

test1();
test2();
 

Приведенный выше блок кода является гипотетическим, и он не работает.

Учитывая ваш текущий код, это невозможно. Весь смысл модулей заключается в том, чтобы избежать неявного глобального загрязнения. Чтобы сделать что-то подобное, вам нужно будет явно назначить функции глобальному объекту внутри модуля, например, изменить:

 export function test1() {
  // do something
}
 

Для

 window.test1 = function test1() {
  // do something
};
 

а затем, когда модуль будет импортирован, функции будут доступны глобально:

 import './script1.js';
 

Но это антипаттерн:

но если у меня много экспорта, то демонтаж будет утомительным.

Для этого требуется некоторый шаблон, но не бойтесь этого — в более крупных проектах наличие явных цепочек зависимостей является огромным плюсом для удобства обслуживания. Он также разрешает встряхивание дерева, что невозможно только для модулей с побочными эффектами (например, присвоение глобальному объекту).

вы также можете очень просто автоматически сгенерировать импорт с помощью такого скрипта:

 import * as functions from './script1.js';

const function_names = Object.keys(functions).join(',')

console.log( function_names ) //output: test1,test2
 

ваш список готов в вашей консоли!