Вызов 'require ("jquery")' только один раз - PullRequest
Новая
       101

Вызов 'require ("jquery")' только один раз

0 голосов
/ 01 ноября 2019

Я использую Gulp с Browserify.

Я бы хотел назвать свои скрипты в определенном порядке: jQuery, jQuery-easing, Bootstrap, [другие библиотеки], затем мои собственные скрипты.

Это, очевидно, не работает:

main.js 

const $ = require("jquery");
require("bootstrap");
// require other libs
require("./scripts.js");

scripts.js 

$(function () {
    // code that won't work
    // because $ is not defined
});

Но если я это сделаю:

main.js 

require("jquery");
require("bootstrap");
// require other libs
require("./scripts.js");

scripts.js 

const $ = require("jquery");
$(function () {
    // code that will work
    // because $ is now defined
});

это работает, но мне интересно, хорошо ли он связывает мои скрипты, и если это хорошо, требовать jQuery 2 раза ...

Есть ли лучший способ продолжить?

Ответы [ 2 ]

0 голосов
/ 15 ноября 2019

Это даже лучше работает с глобальной областью действия: 

global.jQuery = global.$ = require("jquery");
0 голосов
/ 01 ноября 2019

Это на самом деле способ работы Browserify (и других комплектов модулей, таких как Webpack, Rollup и Parcel)! Каждый модуль должен импортировать все другие модули, которые ему нужны для запуска.

Лучший способ понять, почему нужно немного узнать о том, как работают упаковщики модулей JavaScript.

Когда Browserify анализирует ваш файл main.js, он распознает вызовы функции require("...") как зависимости этого модуля. Например, main.js зависит от jquery, bootstrap и ./scripts.js. Он начинает строить граф в памяти так, чтобы он знал, на какие файлы ссылаются. 

./main.js --> jquery
     |
     + -----> bootstrap
     |
     + -----> ./scripts.js

Затем он отключается, анализирует каждую из этих зависимостей и добавляет их в граф. 

./main.js --> jquery <----- +
     |                      |
     + -----> bootstrap     |
     |                      |
     + -----> ./scripts.js -+

Каждый раз, когда он находит новую зависимость, он добавляет ее в график и анализирует ее, чтобы увидеть, от каких модулей зависит зависимость .

Если для одного из ваших модулей требуется модуль, имеющийуже добавлен в график (например, ./scripts.js зависит от jquery), тогда сборщику не нужно снова добавлять его в график, он просто создает другое соединение.

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

Не имеет значения, сколько раз вам потребуется jquery для вашей кодовой базы, он будет добавлен толькок графу зависимостей один раз, а это значит, что потребовать его дважды, так как он не изменит размер пакета.

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

enter image description here

...