将一个大型项目作为Webpack的依赖项

Question

我的问题是关于Foundation for Apps的。到目前为止，如果我正在使用CommonJS代码或在我正在编写的应用程序的上下文中工作，Webpack已经很好了，但我正在努力引入Foundation for Apps，它包含自己的HTML模板，SVG图标，JavaScript和SCSS。

我已经包含了FfA的JavaScript通过要求连接的源(这不是理想的，但它的工作)。我还可以以更干净的方式包含SCSS，因为Webpack的sass加载器似乎知道如何处理@import语句。

当FfA的源(Angular)从一个webpack后不存在的路径请求HTML时，关键问题就出现了。

例如，请求获取/components/modal/modal.html，但我的公共目录中只有bundle.js。我如何加载所有的HTML模板和替换templateUrl路径在FfA的源与require语句，解析到加载的HTML的路径的任何事件?我走的是正确的道路还是有更好的方法?

Answer 1

F4A使用了内置的Front Router插件，它允许你直接在视图模板中定义路由，从而简化了AngularJS中路由的创建。正如这里所示，它意味着在最基本的意义上用于快速原型。例如，即使它实现了Angular的UI-Router和它的states，你也不能使用它们的resolve属性。

我不熟悉Webpack以及它在哪个级别生成所需的模板，但如果你不能在gulp生成之前将它们生成为Front Router的预期markdown，那么你可以禁用该插件并通过将F4A排除在其中并在AngularJs中解决它来实现自定义$stateProvider实例:

.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:如何替换默认的动态路由插件?