В чем разница между использованием базового блока, jquery как модуля commonjs в узле и использованием их в теге скрипта?

Question

Я хочу использовать браузер для объединения интерфейсных библиотек. Поэтому мне нужно, чтобы в качестве зависимостей требовались магистрали и jquery. Но это не работает, если я просто требую их. Я явно установить Backbone $ в JQuery:.

var _ = require('underscore'); 
var $ = require('jquery'); 
var Backbone = require('backbone'); 
Backbone.$ = $; 

И какую-нить говорит, что для JQuery, чтобы правильно работать, мне нужно явно передать объект окна:

var $ = require('jquery')(window); 

Но на самом деле я не необходимо сделать это, и он все еще работает:

В чем разница? Почему это так просто, когда я использую их в теге скрипта, мне нужно только поставить их в правильном порядке, и он просто работает. Зачем мне нужно выполнять дополнительную работу, когда я использую эти библиотеки в качестве модуля commonjs в узле?

Answer 1

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

Как вы отметили, использование модулей CommonJS исправляет это. Зависимости четко обозначаются синтаксисом require и экспортируются с module.exports, и вы можете забыть об управлении зависимостями и позволить загрузчику сценариев сделать это. Сначала это может показаться накладными, но это позволит вашему проекту масштабироваться. Первоначальная стоимость получения модульной системы, настроенной для вашего JS-кода, будет стоить того, что стоит в будущем.

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

Другая по-настоящему важная причина, по которой вы хотите использовать модульную систему для вашего JS-кода, заключается в том, что вы можете объединить все свои скрипты вместе. Используя такой инструмент, как браузер, вы можете просматривать все ваши сценарии и объединять их в один JS-файл, что означает 1 HTTP-запрос вместо отдельного HTTP-запроса для каждого тега скрипта. Это почти всегда означает, что ваша страница будет загружаться быстрее, особенно на мобильных устройствах, где задержка для каждого HTTP-запроса действительно высока.

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