Как легко modularize Javascript, как C/C++

Question

У меня есть большой проект, полностью построенный в JavaScript, у меня есть упорядоченный и «внутримодулированный» файл .js строк 5k, который является движком всего сайта.

Теперь я должен сделать другой сайт (расширение этого), в котором мне придется повторять много кода, мой вопрос в том, что я видел много возможностей, используя Browserify, CommonJS и т. Д. Но это не то, что я ищу, я ищу модульный JavaScript, как и C/C++, что делает #includes с файлами функций или функций и повторным использованием кода. Я уже делаю это, включая другие JS-файлы в HTML, но эти JS-файлы - это только переменные и некоторые массивы, а не функциональность сайта.

Я использую jQuery тоже в этом большом файле .js с 5k. У меня почти все внутри события jQuery document.ready, что тоже вызывает проблемы, потому что мне нужно сделать событие document.ready для каждого файла?

мне нужна ориентация пожалуйста

Answer 1

CommonJS позволит вам require() модулей, это является основой для системы NodeJS модуля. Browserify упрощает эту реализацию для использования в браузерах и даже позволяет вам требовать модули узла (если они не зависят от двоичных файлов, файловой системы и других функций, которые браузер не поддерживает).

var lib = require('someLibrary'); 

ECMAScript6 (aka: ES6) приносит импорт в javascript. Хотя браузеры не поддерживают полностью ES6, вы можете использовать Babel для «пересылки» ES6 на ES5. Этот ES5 будет использовать CommonJS для репликации поведения импорта.

import { SomeClass, someFunction, someValue } from 'some/library'; 

Во всех случаях, ваш Javascript потребует какой-то предварительной обработки для transpile его в javscript браузер может понять. Обычно это означает использование всех ваших отдельных исходных файлов и объединение их в один файл с миниатюрами. Это уменьшает количество запросов, которые должен сделать браузер.

Для обработки всего этого транспиляции и комплектации существует несколько популярных систем сборки, включая Grunt, Gulp и Webpack. Грунт старше и обычно медленнее из-за его конфигурации на основе конфигурации. Gulp проще и быстрее, потому что он использует потоки NodeJS. Webpack является новейшим и мощным, но ценой сложности. За то, что вы надеетесь сделать, я бы рекомендовал посмотреть на Webpack, поскольку он может модулизовать не только ваш javascript, но и ваши таблицы стилей и другие сетевые ресурсы.

http://webpack.github.io/docs/tutorials/getting-started/

Answer 2

Используйте WebPack связать код http://webpack.github.io/docs/tutorials/getting-started/