Webpack/Browserify 和 UI-Router答案

【问题标题】：Webpack/Browserify and UI-RouterWebpack/Browserify 和 UI-Router
【发布时间】：2014-12-15 00:36:14
【问题描述】：

我似乎无法让 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"
        });
}

【问题讨论】：

为什么人们在这里的答案中一直在谈论 Bower？我在这个问题中看不到任何与 bower 相关的内容。
运行时会发生什么？

标签： angularjs browserify webpack

【解决方案1】：

很遗憾，当您将 bower 和 angularjs 依赖注入系统结合使用时，组件经常不会使用与 angular 模块名称相同的 bower 包名称。这完全令人讨厌和令人沮丧，但遗憾的是它很常见。在这种情况下，名为“angular-ui-router”的 bower 组件使用 angular 模块名称“ui.router”声明自己，这也是它在 commonjs 中导出的内容。所以：

在你的package.json“浏览器”部分，像这样配置它：

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

然后在您的浏览器代码中，您既可以require 它（因此 browserify 将其包含在您的捆绑包中）并同时将其注入您的 Angular 应用程序（这有点高级/令人困惑，但它恰好是受此特定模块支持，而 bower 中的大多数 angular js 插件都不支持内置的 commonjs）。

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

【讨论】：

【解决方案2】：

如果你想在 webpack 中使用 bower，你需要这样一行：https://github.com/jeffling/angular-webpack-example/blob/master/template/webpack.config.coffee#L83

这将教会 webpack 读取 bower.json 文件中的 main 属性。这适用于 angular-ui-router - 我在我们的项目中使用它。

【讨论】：

OP 根本没有提到凉亭。他可能正在使用来自 npm 的 angular-ui-router。