Webpack /瀏覽器和UI路由器

Question

我似乎無法讓Webpack或Browserify與UI-Router一起使用。 有人可以幫忙嗎？

這是我的模塊文件：

"use strict";

require("angular");

angular
    .module("app", [require("angular-ui-router")])
    .config(require("./app.routes"));

而我的路線文件：

"use strict";

module.exports = function($urlRouteProvider, $stateProvider) {
    $urlRouteProvider.otherwise("/state1");

    $stateProvider
        .state("state1", {
            url: "/state1",
            templateUrl: "partials/state1.html"
        })
        .state("state2", {
            url: "/state2",
            templateUrl: "partials/state2.html"
        });
}

Answer 1

因此，令人遺憾的是，當結合使用bower和angularjs依賴注入系統時，一個組件經常不會使用與angular模塊名稱相同的bower包名稱。 這是完全煩人和令人沮喪的，但可悲的是，這很普遍。 在這種情況下，名為“ angular-ui-router”的Bower組件使用角度模塊名稱“ ui.router”聲明自己，這也是在commonjs中導出的​​組件。 因此 ：

在您的package.json “瀏覽器”部分中，如下配置：

"ui.router": "./bower_components/angular-ui-router/release/angular-ui-router.js",

然后，在您的瀏覽器代碼中，您既可以require它（因此，browserify將其包含在您的捆綁軟件中），又可以同時將其注入到您的角度應用程序中（這有點高級/令人困惑，但是恰好此模塊支持該功能） ，而bower中的大多數有角度js附加組件均不支持內置的commonjs）。

angular.module("app", [require("ui.router")]);

Answer 2

如果要對Webpack使用Bower，則需要這樣的一行： https : //github.com/jeffling/angular-webpack-example/blob/master/template/webpack.config.coffee#L83

這將指導webpack讀取bower.json文件中的main屬性。 這適用於angular-ui-router-我在我們的項目中使用了它。