Webpack с angular 1.x и ES5

Прочитав сотни строк о браунировании vs webpack и несколько способов, как я решил пойти на webpack. Основная причина в том, что мне понравилась идея связать все с файлом js.

У меня уже есть проект angular, и я хочу реорганизовать его для webpack. Проблема? Мой проект использует angular 1.4.7, ng-animate и простой javascript (ES5), а все руководства и руководства для ES6. Я не хочу реорганизовать свой проект так сильно. Какой путь? Я хотел бы привести пример каждого модуля angular: factory, директива, контроллер и т.д. Большое спасибо

Ответ 1

У меня обычно есть файл feature.module.js, который имеет мое определение модуля и требует всех директив/служб, содержащихся в модуле. Также имеет внешние зависимости.

/* module.js */
angular.module('my.module',['dependancy1', 'dependancy2']);

//External libraries
require('./dependancy1.module.js');
require('./dependancy2.module.js');

//Internal components
require('./thing.directive');
require('./thing.service';

Ответ 2

Теперь я имею дело с той же проблемой. И я нашел что-то, что работает (работа продолжается, но по крайней мере я вижу прогресс). Мои шаги:

Установить yeoman
Запустите этот angular -webpack generator. Выберите "ES5" при запросе (другой вариант - "ES2015", который, как я полагаю, совпадает с "ES6" )
Начните изменять автоматически сгенерированный шаблон с помощью кода Angular

Да, вам все равно нужно узнать о gulp и sass, но по крайней мере вы можете запустить простое приложение AngularJS с использованием старого синтаксиса ES5 и начать его модификацию.

Я, вероятно, об этом расскажу. Итак, я обновлю этот ответ.

Ответ 3

Я имею тенденцию делать это:

app.js:

require('/any/angular/deps');
var subModule = require('/some/sub/module');

var app = angular.module('myApp', []);

// pass the app module in sub modules to allow them to define their own config
subModule.configure(app);

/subModule/module.js:

var someSubDirective = require('./subDir/directive');

export function configure(app) {

   someSubDirective.configure(app);

}

/subModule/subDir/directive.js:

export function configure(app) {
   app.directive('myDir', myDir);
}

function myDir() {

}

Моя идея состоит в том, чтобы все под-модули обрабатывали свою собственную конфигурацию, поэтому объявляя config или constant, factories или providers. Позволяя этому, то пузырь до app.js. Это означает, что очень просто удалить папку из вашей структуры, потому что это одна строка, удаляющая из нее родительский модуль.

Это также делает соответствующие пути к файлам намного короче и удобнее в обращении.