Webpack Импорт функции javscript из модуля также импортирует все остальные операторы и функции в этом модуле.

Question

Я использую веб-пакет для своего проекта.

Предположим, у меня есть файл dep.js со следующим кодом

export function abc() {
   var a = 10;
}

console.log(100);

function xyz(){
   var b = 11;
}

xyx();

И у меня есть файл main.js, который имеет следующий код

import {abc} from './dep.js';

Согласно логам c импорта и экспорта, должна быть импортирована только функция abc. Но когда я проверил источник в консоли, я обнаружил, что

-> все другие операторы и функции, такие как console.log(100), function xyx, также были импортированы

-> и эффект вызов функции через xyz() в dep.js также показывает эффект в main.js

Почему это происходит?

Answer 1

Так работают модули по умолчанию. Если какая-либо часть модуля импортируется хотя бы один раз, весь модуль выполняет весь код верхнего уровня.

Возможно удалить мертвый код, который не запускается с дерево трясется в Webpack, но у показанного модуля нет мертвого кода - у него есть экспортированная функция, которая используется, и у него есть код, который запускается на верхнем уровне и вызывается (console.log, объявление xyx и вызов xyx).

Если вы экспортировали что-то, что не использовалось где-либо еще в модуле, это можно было бы отбросить при встряхивании дерева, Например:

export function abc(){
   var a = 10;
}
export function def(){
   var a = 10;
}

Здесь, если def не импортируется и не используется в другом месте, он может быть автоматически удален.

(Также обратите внимание, что определения функций требуют () с после них, даже если они не принимают аргументов)

---

Именно из-за этого я почти всегда экспортирую только функции - хорошо избегать написания кода с побочными эффектами на верхнем уровне модуля, потому что тогда просто импортировать модуль приведет к этим побочным эффектам (как вы видите здесь). Как правило, структурировать код проще, если у вас есть одна точка входа (например, main.js), которая импортирует необходимые функции и затем вызывает их. Если каждый модуль выполняет код с побочными эффектами как часть верхнего уровня, вещи могут быстро стать очень запутанными и неуправляемыми. (Эта техника также улучшает дрожание деревьев, но это лишь побочное преимущество)