Я перехожу из позднего завтрака в Webpack (используя Laravel Mix) и пытаюсь добиться того же рабочего процесса, который я использовал ранее, в основном:
- Наличие всего двух пакетов для всего приложения: app.js и site.css
- Возможность запрашивать и загружать определенные модули из HTML
Рассмотрим следующую гипотетическую структуру папок:
public/
|-- dist/
| |-- site.js
| |-- site.css
|-- javascripts/
| |-- application.ts
| |-- components/
| | |-- dateTimePicker.ts
| |-- dashboard/
| | |-- index.ts
|-- stylesheets/
| |-- application.sass
Для конфигурации я использую что-то вроде:
mix.setPublicPath('public');
mix.ts('public/javascripts/application.ts', 'dist').sourceMaps();
mix.sass('public/stylesheets/application.scss', 'dist');
А теперь для каждой страницы, которую я хочучтобы иметь возможность просто:
<script>
var module = require("dashboard/index");
module.Init();
</script>
(Этот подход похож на то, что люди делали с Ruby on Rails и Sprockets и файлами манифеста).
Просто чтобы выделить целиявляются:
- Предоставьте этот один связанный / уменьшенный / сжатый файл, чтобы пользователи запрашивали его только один раз, когда-либо!
- Загружайте модули по требованию для каждой страницы.Поскольку я использую MPA с прогрессивным улучшением, мне просто нужно запустить несколько javascript для каждой страницы.Это очень удобно, потому что я могу передать параметры из моего механизма шаблонов (Razor) в этот модуль перед его инициализацией.
PS.: Я могу ошибаться, но Бранч не будетзагрязнять глобальное пространство имен для выставления модулей.