使用 Gulp 时 AngularJS 组件配置错误答案

【问题标题】：AngularJS component misconfiguration when using Gulp使用 Gulp 时 AngularJS 组件配置错误
【发布时间】：2023-03-04 23:54:01
【问题描述】：

我正在尝试使用 Gulp 作为构建工具来设置一个 AngularJS Web 项目，同时遵循 John Papa 的 opinionated style guide。但是，当我加载我的页面时，我收到以下错误：

未捕获的错误：找不到模块'function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("找不到模块'"+o+"'" )}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=to[e];return s( n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0; ○

错误：[ng:areq] 参数 'WelcomeController' 不是函数，得到不明确的 http://errors.angularjs.org/1.4.5/ng/areq?p0=WelcomeController&p1=not%20a%20function%2C%20got%20undefined 在 REGEX_STRING_REGEXP (angular.js:68) 在 assertArg (angular.js:1795) 在 assertArgFn (angular.js:1805) 在 angular.js:9069 在 setupControllers (angular.js:8133) 在 nodeLinkFn (angular.js:8173) 在compositeLinkFn (angular.js:7637) 在compositeLinkFn (angular.js:7641) 在 publicLinkFn (angular.js:7512) 在 angular.js:1660

我的文件结构如下：

应用模块（main.js）：

(function() {
  'use strict';
  angular.module('cbCommApp', []);
})();

控制器组件（WelcomeCtrl.js）：

(function() {
  'use strict';

  angular
      .module('cbCommApp')
      .controller('WelcomeController', WelcomeController);

  /* If depdencies are required - use the $inject option */
  WelcomeController.$inject = ['$scope'];


  function WelcomeController($scope) {
    /*jshint validthis: true */
    var wc = this;
    wc.testVar = 'We are up and running from a required module!';
  }
})();

HTML 文档：

<!doctype html>
<html lang="en" ng-app="cbCommApp">
<head>
  <title>My App Title</title>
</head>
<body ng-controller='WelcomeController as welCtrl'>
  <h1>Hello World</h1>
  <p>{{welCtrl.testVar}}</p>
  <script src="/assets/javascript/jquery.min.js"></script>
  <script src="/assets/javascript/angular.js"></script>
  <script src="/assets/javascript/bundle.js"></script>
</body>
</html>

Gulp 任务：

// Browserify task
gulp.task('browserify', function() {
  gulp.src(['source/javascript/**/*.js'])
  .pipe(browserify({
    insertGlobals: true,
    debug: true
  }))
  // Bundle to a single file
  .pipe(concat('bundle.js'))
  // Output it to our dist folder
  .pipe(gulp.dest(config.jsAssets));
});

我已验证 Angular 库正在正确加载，并且它会引导 cbCommApp。它似乎无法找到 Controller 组件。有谁知道哪里出了问题？

【问题讨论】：

您的bundle.js 文件看起来是否所有内容都按正确的顺序排列？我也不熟悉像这样使用browserify。我以为是能用require()
您应该能够使用var WelcomeCtrl = require('./controllers/WelcomeCtrl'); 之类的东西，但这不符合我提到的我试图遵循的风格指南。我的目标是让 Angular 组件在未来需要时可以移植到非 Node 环境中，同时遵循最佳实践。事情确实以正确的顺序出现在bundle.js 中（应用程序在第 1401 行定义，控制器在 2809 定义）

标签： javascript angularjs node.js gulp

【解决方案1】：

您必须确保 main.js 在您的串联版本中位于 JavaScript 的其余部分之前。否则，您尝试将 WelcomeCtrl 分配给不存在的模块，而将被忽略。您可以通过如下方式指定来源来做到这一点：

["source/javascript/main.js", "source/javascript/**/*.js"]

【讨论】：

不幸的是，这对我不起作用。根据您的建议，我将 src 参数更改为 gulp.src(['source/javascript/main.js', 'source/javascript/**/*.js'])，但我在控制台中遇到了相同的错误。您可以在生成的 bundle.js 文件 here （第 1401 和 2809 行）中看到内容以正确的顺序出现

【解决方案2】：

似乎 Browserify 或您的 concat 命令都会使 JS 变得丑陋，以便将函数名称重命名为单个字母（您可以在输出中看到：function e(t,n,r){...）。您不应该丑化代码，或者直接使用匿名函数（如.controller('WelcomeController', function($scope) {...})）定义您的控制器等。如果你 uglify，你还需要使用 ngAnnotate，因为否则 Angular 的依赖注入会破坏单字母参数名称（也许 ngAnnotate 甚至可以解决你最初的问题 - 我不确定）。

【讨论】：

这不是真的，因为 uglify 只改变参数而不是字符串。提到的指南建议使用字符串，因为这样可以在不破坏任何内容的情况下对名称进行丑化。