未捕获的 ReferenceError：未使用 AngularJS、Rails 4 和 Browserify 定义要求答案

【问题标题】：Uncaught ReferenceError: require is not defined using AngularJS, Rails 4 and Browserify未捕获的 ReferenceError：未使用 AngularJS、Rails 4 和 Browserify 定义要求
【发布时间】：2015-10-05 23:50:00
【问题描述】：

我正在使用 AngularJS 和 Rails，并按照http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/ 和其他几个教程在我的桌面上建立并运行了一个非常简单的“Hello World”示例。问题是，当我将它部署到服务器时，我的基于 Angular 的代码都不再工作了。相反，我在控制台中收到 Uncaught ReferenceError: require is not defined 错误。

我意识到我的部分问题是浏览器不知道如何处理“require”函数调用，这是有道理的，所以我使用 browserify-rails 安装了 Browserify。但是，它仍然无法像我预期的那样在服务器上运行，并且出现同样的错误。

直播网站链接：Link

这是我的application.html.erb（简体）：

<!DOCTYPE html>
<html>
<head>
  <base href="/" />
  <title>ShibaInu</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="shibaInu">
  <div class="container">1 + 2 = {{ 1 + 2 }}</div>

  <div class="container">
    <%= yield %>
  </div>

</body>
</html>

index.html.erb:

<div ng-view=""></div>

home.html.erb（在容器内渲染）：

<h1>The Home View!</h1>
<ul>
  <li ng-repeat="thing in things">
    {{thing}}
  </li>
</ul>

home.js:

angular.module('shibaInu')
    .controller('HomeCtrl', function ($scope) {
        $scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!'];
    });

app.js:

angular
    .module('shibaInu', [
        'ngRoute',
        'templates'
    ]).config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
             });
        $locationProvider.html5Mode(true);
    });

application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-route
//= require angular-resource
//= require angular-rails-templates
//= require bootstrap-sprockets
//= require ng-app/app.js
//= require_tree ../templates
//= require_tree .

【问题讨论】：

你能发布你的application.js清单文件吗？
@Zoran 感谢您的快速回复！我已将其添加到帖子中。

标签： ruby-on-rails angularjs ruby-on-rails-4 browserify browserify-rails

【解决方案1】：

我做错了几件事，但我会尝试总结一下：

我正在像一个好孩子一样在我的服务器部署上缩小 JS，但我并没有编写缩小安全的 JS。请参阅下面的我的固定 JS。
这在我的原始帖子中没有指定，但我并没有像我想象的那样使用angularjs-rails gem。我将此添加到我的项目中。
与上面的 2 相关，在我最初的帖子中，我使用 bower 安装了 angularjs，就像文档推荐的那样。对于我的解决方案，我把它去掉了，因为它只是为了我的目的而把事情弄得一团糟。

新的 home.js：

angular.module('shibaInu')
    .controller('HomeCtrl', ['$scope', function ($scope) {
        $scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!'];
    }]);

新的 app.js：

angular
    .module('shibaInu', [
        'ngRoute',
        'templates'
    ]).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
             });
        $locationProvider.html5Mode(true);
    }]);

【讨论】：