Включение большого проекта в качестве зависимости с Webpack

Question

Мой конкретный вопрос с Фондом для приложений. До сих пор Webpack был великолепен, если я работаю с кодом CommonJS или в контексте написанного мной приложения, но я изо всех сил пытаюсь внедрить Foundation for Apps, который содержит собственные HTML-шаблоны, значки SVG, JavaScript и SCSS.

Я включил JavaScript в FfA, потребовав объединенный источник (который не идеален, но работает). Я также могу включить SCSS более понятным способом, так как загрузчик sass в Webpack, похоже, знает, что делать с @import заявления.

Основные проблемы возникают, когда источник FfA (Angular) запрашивает HTML по пути, который не существует после Webpack.

Например, будет сделан запрос на получение /components/modal/modal.html но единственное в моем публичном каталоге bundle.js, Как я могу загрузить все шаблоны HTML и заменить любые вхождения templateUrl пути в источнике FFA с require заявления, которые разрешают путь загруженного HTML? Я иду по правильному пути или есть лучший подход?

Answer 1

F4A использует встроенный плагин Front Router, который упрощает создание маршрутов в AngularJS, позволяя вам определять их непосредственно в ваших шаблонах представления. Как показано здесь, он предназначен для использования в самом основном смысле и для быстрого прототипирования. Например, даже если он реализует UI-маршрутизатор Angular и его states, вы не можете использовать их свойство разрешения.

Я не знаком с Webpack и на каком уровне он генерирует необходимые шаблоны, но если вы не можете сгенерировать их как ожидаемые уценки Front Router, прежде чем они будут сгенерированы gulp, тогда вы можете отключить плагин и реализовать свой собственный $stateProvider Например, оставив F4A из него и решив его в AngularJs:

.state('yourstate', {
    url: '/yoururl',
    templateUrl: 'templates/yourTemplate.html',
    //
    // or maybe something like :
    //    -- this is guessing. i'm not familiar with webpack :) --
    //
    // templateUrl: function (wabpack) {
    //     return '/partials/' +  wabpack.path + '.html';
    // }
    //
    controller: 'YourController',
    resolve: {
        // you may also use resolve here for extra logic before
        // loading your template
    }

О том, как отключить F4A Front Rooter и как реализовать свой $stateProvider Например, вы можете проверить это:

Foundation for Apps: как заменить плагин динамической маршрутизации по умолчанию?