requirejs optimizer - нужна помощь в оптимизации нашего приложения
У нас есть крупномасштабное приложение javascript, которое мы пытаемся объединить и минимизировать с помощью grunt-contrib-requirejs. Мы используем фреймворк Aura. Мы используем bower для добавления зависимостей из других репозиториев в наше основное приложение.
Вот структура нашего приложения
- app/
|
|_ main.js
|_ index.html
|_ css
|_ bower_components/
|_ core/
|_ widget1/
|_ main.js
|_ views/
|_ models/
|_ widget2/
|_ extension1/
|_ extension2/
|_ other third party libraries, etc
- Gruntfile.js
- bower.json
main.js:
requirejs.config({
shim: {
...
},
paths: {
'core': 'bower_components/core/app/main',
'aura': 'bower_components/aura/dist/',
'jquery': 'bower_components/jquery/jquery',
'backbone': ...,
... lots of other paths
}
});
define(['core', 'jquery', 'jqueryui'], function(core, $) {
// Here we start Aura, which finds our extensions and widgets in
// bower_components
});
Наша текущая конфигурация задачи requirejs:
requirejs: {
compile: {
options: {
mainConfigFile: 'app/main.js',
name: 'main',
include: ['bower_components/widget1/main', 'bower_components/widget2/main',
'bower_components/extension1/main', 'bower_components/extension2/main'],
exclude: ['jquery'],
insertRequire: ['main'],
out: 'dist/app.js'
}
}
}
Это соответствует нашему app/main и его зависимостям, но когда мы пытаемся запустить его, мы получаем такие ошибки, как:
ПОЛУЧИТЕ http://www.my-machine:8080/bower_components/underscore/underscore.js 404 (не найдено), хотя подчеркивание является зависимостью многих виджетов, которые мы включаем.
Мы тщательно опробовали различные варианты в примерах r.js и прочитали множество проблем с потоком стека, пытаясь найти ответ.
Нам нужен совет о том, как встроить это в один минимизированный файл с такой структурой:
ОБНОВЛЕНИЕ № 2: Правильная структура файла
- dist/
|_ index.html // copied using grunt copy
|_ css // copied using grunt copy
|_ app.js // Built with grunt requirejs
ОБНОВИТЬ
Мы включили underscore
в нашей прокладке, которая исправила вышеуказанную ошибку, но мы все еще получаем другую ошибку:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://my-machine.com:8080/bower_components/core/app/main.js
Это включено в свернутый файл, поэтому я не понимаю, почему он не может найти этот файл:
define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){
...
});
ОБНОВЛЕНИЕ № 3
Вышеприведенное определение взято из файла, созданного инструментом оптимизации! Исходное определение для этого модуля, core/app/main.js
, похоже:
define(['aura', 'bootstrap'], function(Aura) {
...
});
2 ответа
Вы упоминаете, что это в вашем оптимизированном файле:
define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){
...
});
Но это не имеет смысла. Если я воспроизведу структуру, аналогичную той, что вы показываете в своем вопросе, и проведу оптимизацию, то файл, расположенный по адресу bower_components/core/app/main.js
оптимизируется как:
define("core", ...
потому что это известно как core
в остальной части вашего заявления из-за paths
установка 'core': 'bower_components/core/app/main'
,
Я могу воспроизвести неправильное имя модуля, если я добавлю 'bower_components/core/app/main.js'
к include
настройка в конфигурации сборки. Когда я добавляю это имя к include
список, я также получаю ошибку загрузки, которую вы упомянули. Убедитесь, что ваш include
список не содержит это имя, и убедитесь, что нигде нет ничего, что списки 'bower_components/core/app/main.js'
как зависимость. Это имя не должно появляться ни в одном define
или же require
вызов.
Сначала пара соображений:
Прежде всего, вы должны избегать определения модуля с именем. Имя должно генерироваться инструментом оптимизации в обычном режиме. Пожалуйста, прочитайте здесь: http://requirejs.org/docs/api.html
Во-вторых, вы должны понимать, что такое baseUrl и когда он используется для размещения ресурсов. В вашем случае baseUrl выглядит как "app /", хотя вы не определили его явно. Вы также должны прочитать это: http://requirejs.org/docs/api.html Так что если вы используете расширение ".js", то baseUrl не будет учитываться.
Теперь, что вы должны попробовать:
Для начала удалите первый аргумент "bower_components / core / app / main.js" из функции define. Затем вам следует обратиться к этому модулю с помощью автоматически сгенерированного идентификатора модуля, который будет путем относительно baseUrl без расширения ".js".