нужна помощь по browserify

Вопрос-ответ JavaScript
1

Доброго дня! я новичёк в JS и в модульном JS тем более
Начал работать с browserify по этой статье http://habrahabr.ru/post/224825/ и некторым другим

сделал простенький проект - https://github.com/filippov70/cadXML2GeoJSON
для сборки использую Grunt

browserify: {
            main: {
                options: {
                    browserifyOptions: {
                        debug: true
                    }
                },
                src: 'src/app.js',
                dest: 'dist/app.js'
            }
        }

dist/app.js создаётся без ошибок и используется в index.html (через script и в head пробовал, и в конце body подключал. функцию вызываю при onload у body)
и тут ошибка - Uncaught ReferenceError: run is not defined
хотя функция run() есть

2

Дело в том как ты запускаешь скрипт.

<body onload="run()">

Такой подход подразумевает, что у тебя на глобальном уровне есть переменная run. В скриптах же нигде глобальная переменная не объявляется (чтобы объявить глобальную переменную, надо создать свойство объекта window вот так:

window.run = function () {};

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

Или вариант получше: внутри скрипта (app.js) вызови главную функцию run, а скрипт подключи прямо перед закрываемым body. Получится, что твое приложение запустится сразу же как будет загружен скрипт, при этом у него будет доступ к DOM (всему, что выше скрипта).

3

Спасибо dmitry, сделал по варианту №2. Работает

1 лайк
4

кратко прочитал на хабре по ссылку о browserify. Я так понимаю он решает те же задачи что и bower ?

5

Нет, задачи решаются разные.

  • bower нужен для установки клиентских пакетов (набора js, css, img) как части приложения и поддержки их версионности. Например можно сказать, что ты хочешь иметь в проекте версию jquery 1.10.*.
  • browserify решает задачу сборки одного js файла из множества с помощью чтения require (определение модулей через exports и подгрузку через require называется commonjs modules). Пример подгрузки модуля выполняется вот тут: https://github.com/filippov70/cadXML2GeoJSON/blob/master/src/app.js#L7