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

Question

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

0

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

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

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

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

gconsidine 27 авг. 2015, в 16:33

Источник

Теги:

angularjs

webpack

zurb-foundation-apps

1 ответ

Ещё вопросы

Salem Ouerdani · Answer 1 · 2015-09-05T11-09-00.000Z

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

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

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