Как объединить в один файл проект с функциями require?

#javascript #nodejs #javascript_faq

Как объединить в один файл js несколько файлов в которых присутствует функция:

require('./main')
require('./result')
require('./solution')


После установки npm пакета на локальном сервере файлы правильно обрабатываются браузером. 
А когда цепляю main.js файл в котором присутствуют require() к html. То на другом
сервере он пишет ошибки


  Uncaught Error: Mismatched anonymous define() module: 


Есть ли какие нибудь инструменты, чтобы получить один js файл где уже все зависимости
включены на месте?

Нужно прицепить js код в файл на сервере где нельзя ставить node или что то подобное.
То есть js должен обрабатываться чисто на клиенте и всё. Он ничего не должен подгружать.
    

Ответы

Ответ 1

Такие инструменты есть, и их много.

Этот класс инструментов называется "системы сборки". Суть их работы сводится к построении
AST дерева по JS коду для поиска всех зависимостей и подмене require функций на специфичный
для сборщика код. На выходе вы получаете один JavaScript файл, со всем вашим кодом
(и зависимостями) внутри.

В качестве примера приведу пример использования двух популярных систем сборки: Browserify
и Webpack. (Есть и другие, но про них Google расскажет вам лучше меня.)

Browserify появился раньше чем Webapack и решает несколько более узкий круг задач
(см. описание Webpack ниже). Для глобальной установки достаточно выполнить команду:

npm install -g browserify


Для сборки проекта нужно выполнить:

browserify main.js -o bundle.js


где main.js - точка входа вашего приложения, а bundle.js - имя результирующего файла.

Webpack в отличии от Browserify создавался не только для сбора JavaScript кода. Эта
среда сборки расширяет применимость функции require позволяя вам использовать ее для
подключения:


картинок
CSS файлов
файлов, написанных для CSS препроцессоров (LESS/SASS/...)
исходном коде на языках, компилируемых в JS (CoffeeScript и др.)
шаблонов


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

Если говорить только о JS приложениях, то Webpack может работать аналогично Browserify.
Для глобальной установки вам достаточно выполнить команду:

npm install webpack -g


Для сборки проекта нужно выполнить:

webpack ./entry.js bundle.js


где ./entry.js - точка входа вашего приложения, а bundle.js - имя результирующего файла.

Замечание

Дополнительно, вы можете почитать о распространенных модульных системах в JS в другом
моем ответе.