Запустите script, используя сначала Browserify без процесса сборки

Я прочитал много статей о Browserify, например http://javascriptplayground.com/blog/2013/11/backbone-browserify/, и всегда есть такой шаг, как показано ниже:

$ browserify app/app.js | uglifyjs > app/bundle.js

Кажется, что это сделано до, вы запустите script в браузере, чтобы узнать, как это работает. Есть ли способ НЕ делать сборку каждый раз, когда я меняю код? Что-то вроде функции define() в requirejs...

Ответы

Ответ 1

Я изначально сказал, что вы не можете сделать это по причинам ниже, но я хочу добавить, что там, где есть воля, есть способ. Я уверен, что дал достаточно времени и сил, вы (или кто-то) мог (и, вероятно, будет) придумать способ выполнить эту задачу, но по состоянию на данный момент (12/12/13), я не знаю, там любой из инструментов, которые будут облегчать его.

  • браузеры "модули" написаны с использованием той же концепции, что и модули node.js. Вы пишете свой код и экспортируете любые общедоступные методы/свойства/etc через объект module.exports. Javascript в браузере не поддерживает подобные вещи изначально. Существуют некоторые шаблоны шаблонов (некоторая информация здесь), чтобы облегчить это в браузере, и они могут быть совместимы с браузером, но...

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

Require.js работает принципиально иначе, чем браузер. Require.js определяет ваши пакеты с использованием синтаксиса define, на который вы ссылаетесь, и предоставляет метод require, который вы используете для указания Require.js, из которых модули зависят от вашего кода. Require.js затем, в свою очередь, ищет нужные вам зависимости и если он еще не загрузил их для другого модуля, генерирует новый тег script и заставляет ваш браузер загружать этот модуль, ожидая выполнения вашего кода, пока это завершено. Это асинхронный процесс, а это значит, что механизм javascript продолжает обрабатывать инструкции, ожидая, что новый script загрузит, проанализирует и выполнит. Require.js обертывает все это в некоторых обратных вызовах, поэтому он может дождаться, пока все ваши зависимости не будут удовлетворены, прежде чем разрешить выполнение определенного кода (поэтому вы передаете функции require и define, поэтому require.js могут выполнять их, когда они готовы).

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

  • Не уклоните свой код во время разработки. Вы можете просто связать его с помощью браузера (убедитесь, что вы используете -d, для sourcemaps), не упуская/нивелируя его, что должно ускорить производительность пакета (для больших проектов, во всяком случае).
  • Разделите свои модули немного. Модули, которые не имеют прямых зависимостей друг с другом, не обязательно должны быть построены в одно и то же время. Вы можете включать различные модули в ваше приложение, используя несколько тэгов script, или вы можете объединить файлы обозревателя вместе. Вы могли бы абсолютно настроить некоторые задачи, чтобы посмотреть ваш код на изменения, и только скомпилировать модули, в которых содержится изменение кода. Это вырезает много запущенных циклов процессора, поскольку браузеру не придется анализировать и преобразовывать несколько модулей, только те, которые изменились. Оттуда вы можете повторно объединиться в один большой пакет или просто придерживаться нескольких пакетов, включенных на странице.

Ответ 2

Сейчас 2015 и там есть библиотека для этого, она называется drq. Он использует внутренние запросы sync xhr, поэтому он хорошо подходит для целей разработки. Вам просто нужно включить его:

<script src="drq.js"></script>

И затем вы можете выполнить свои вызовы на любом script на странице:

<script>

var myModule = require('my-module'),
    myClass = require('./classes/my-class.js');

// etc.

</script>

Он будет искать модули node до вашего веб-корня, поэтому не забудьте npm install их в каталоге, не превышающем его. Кроме того, ознакомьтесь с страницей GitHub, где вы найдете несколько советов по повышению производительности.

Опять же, помните, что пучки являются оптимальным решением для производства.