Начало работы с Yabble - загрузка CommonJS-модуля на стороне браузера - PullRequest
Новая
       31

Начало работы с Yabble - загрузка CommonJS-модуля на стороне браузера

5 голосов
/ 09 марта 2011

Кто-нибудь знаком с Yabble или другими загрузчиками CommonJS на стороне браузера?

Я экспериментирую с Node.js и очень хотел бы создать модули Javascript, которые можно использовать взаимозаменяемона стороне сервера и на стороне клиента.В конечном итоге это может быть скорее «потому что это потрясающе», а не «потому что это практично и полезно».

Поэтому я в основном пытаюсь получить CommonJS require()метод работы на стороне браузера, что и делает Yabble.Хотя я не знаю, с чего начать.Кажется, я не могу найти какую-либо документацию, кроме того, что находится в readme от Yabble's Github, и это не очень помогает.

По сути, все, что я сделал, это поместил это в HTML-страницу... 

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

<!-- Uses require -->
<script>
    require.setModuleRoot('http://localhost:8030/')
    my_module = require('my_module')
</script>

Но каждый раз, когда я вызываю функцию require(), я получаю Synchronous require() is not supported. исключение.

Может ли кто-нибудь помочь мне начать?Где я должен загрузить yabble.js, куда я должен позвонить, требуют?Есть ли специальный способ запуска моих модулей Javascript?

Ответы [ 2 ]

6 голосов
/ 13 марта 2011

При загрузке кода Javascript, который должен использовать функцию require() в браузер, точка входа в этот код должна быть функцией require.run().

например, хорошо: 

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

<script>
    require.setModuleRoot('http://localhost:8030/')
    require.run('my_module') // <-- Uses require() function somewhere
</script>

например, плохо (получит ошибку Synchronous require() is not supported): 

<script src="yabble.js"></script>
<script src="http://localhost:8030/my_module.js"></script> <!-- <== Use's require function somewhere -->

К вашему сведению, это довольно изящно, как Yabble делает это. Он на самом деле статически анализирует ваш исходный код Javascript, я думаю, что в основном я использую регулярное выражение для поиска метода require(), а затем пытаюсь извлечь этот скрипт .js с сервера, а затем выполняет тот же статический анализ этого .js скрипт и так далее.

Это может быть особенно запутанным, потому что он на самом деле будет загружать эти сценарии .js, даже если логика управления будет означать, что поток программы никогда не достигнет функции require(). например, если бы вы имели ... 

if (False) { require('some_module'); }

... Yabble будет все еще загружать этот модуль.

2 голосов
/ 09 марта 2011

Синхронная загрузка модулей в браузере проблематична. Конструкция типа: 

var x = require('something_remote.js')

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

http://www.sitepen.com/blog/2010/07/16/asynchronous-commonjs-modules-for-the-browser-and-introducing-transporter/

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

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

require("something.js", function () { // called later, after something.js has loaded! })

Похоже, что RequireJS делает это:

http://requirejs.org/docs/start.html

Возможно, дайте этому шанс?

Среды JavaScript, такие как NodeJS и т. Д., Созданные с возможностью загрузки «локальных» модулей с диска вместо хостов сторонней сети, могут выполнять синхронную загрузку.

Буду очень признателен за любые исправления от экспертов JS: -)

...