gulp4 和 browserify 任务捆绑错误找到一个模块

Question

任务完成没有错误，但是当页面被提供时，这是错误：

  Uncaught ReferenceError: appRoot is not defined

使用的 gulp 模块（未列入黑名单）：

       buffer = require('vinyl-buffer'),
      sourceStream = require('vinyl-source-stream'),
      ngAnnotate = require('browserify-ngannotate'),
      browserify = require('browserify'),

控制台指向捆绑的文件之一，该文件包含 DMPEController 控制器。

gulp 任务：

gulp.task('browserify', function() {
 var b = browserify({
    entries: [paths.appJSSrc, 'src/scripts/app/controllers/dmpe.js',
                'src/scripts/app/services/mapDataFactory.js', 'src/scripts/app/services/services.js',
                'src/scripts/app/directives/directives.js'],
    debug: true,
    paths: ['./src/scripts/app/controllers', './src/scripts/app/services', './src/scripts/app/directives'],
    transform: [ngAnnotate]
});

return b.bundle()
    .pipe(sourceStream('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.appRoot))

});

任务输出（缩短方法细节，删除一些代码 = ...）：

  (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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

  var appRoot = angular.module('main', ['ui.bootstrap', 'ngRoute','ngMessages', 'ngTouch', 'ngResource', 'ngAnimate', 'ngSanitize', 'angularStart.services', 'angularStart.directives']);


  appRoot
    .constant('modalConfig', {backdrop: true...})
    .value('debugMode', true)
    .value('mockMode', true)
    .config([...])
    .factory('_', [...])
    .controller('RootController', [...])
    .filter('true_false', function() {...})
    .filter('capitalize', function() {...});

  },{}],2:[function(require,module,exports){
  'use strict'
  appRoot.controller('DMPEController', ['$timeout', '$rootScope', '$scope', 'mapDataFactory', '$http', '$q', '$log', '$filter', 'ModalService', 'mockMode', 'debugMode', function ($timeout, $rootScope, $scope, mapDataFactory, $http, $q,  $log, $filter, ModalService, mockMode, debugMode){...}]);
  },{}],3:[function(require,module,exports){

  var angularStartDirectives = angular.module('angularStart.directives', []);     //Define the directive module

  angularStartDirectives
    .directive('loadingWidget', ['requestNotificationChannel', function (requestNotificationChannel) {...}])
    .directive('modal', ['$parse', 'modalConfig', function($parse, modalConfig) {...}])
    .directive('bindOnce', [function() {...}]);
  },{}],4:[function(require,module,exports){

  appRoot.factory('mapDataFactory', ['$q', '$timeout', '$http', '$rootScope','$log', 'debugMode', 'mockMode', function ($q, $timeout, $http, $rootScope, $log, debugMode, mockMode) {...}]);
  },{}],5:[function(require,module,exports){

  var angularStartServices = angular.module('angularStart.services', ['ngResource']);    

  angularStartServices
    .factory('requestNotificationChannel', ['$rootScope', function ($rootScope) {...}])
    .factory('ModalService', ['$document', '$compile', '$controller', '$http', '$rootScope', '$q', '$templateCache', '$log',
    function($document, $compile, $controller, $http, $rootScope, $q, $templateCache, $log) {...}]);

  },{}]},{},[1,2,4,5,3])


  //# sourceMappingURL=bundle.js.map

Answer 1

我认为您遇到此问题是因为范围界定问题。我认为您的构建过程应该没问题。

加载控制器脚本代码时，它会尝试在 appRoot 上定义控制器，但该脚本不知道 appRoot 变量。

另一种方法是让您的模块文件公开一段稍微不同的代码。

而不是暴露;

appRoot.controller('DMPEController', ['$timeout', '$rootScope', '$scope', 'mapDataFactory', '$http', '$q', '$log', '$filter', 'ModalService', 'mockMode', 'debugMode', function ($timeout, $rootScope, $scope, mapDataFactory, $http, $q,  $log, $filter, ModalService, mockMode, debugMode){...}]);

可以试试；

module.exports = ['$timeout', '$rootScope', '$scope', 'mapDataFactory', '$http', '$q', '$log', '$filter', 'ModalService', 'mockMode', 'debugMode', function ($timeout, $rootScope, $scope, mapDataFactory, $http, $q,  $log, $filter, ModalService, mockMode, debugMode){...}];

然后在定义appRoot 的原始文件中；

var appRoot = angular.module('main', ['ui.bootstrap', 'ngRoute','ngMessages', 'ngTouch', 'ngResource', 'ngAnimate', 'ngSanitize', 'angularStart.services', 'angularStart.directives']);

var DMPEController = require('./path/to/DMPEController/file.js');

appRoot.controller('DMPEController', DMPEController);

另一种方法是保持代码不变，但在创建时将 appRoot 分配为全局变量。

var appRoot = window.appRoot = angular.module('main', ['ui.bootstrap', 'ngRoute','ngMessages', 'ngTouch', 'ngResource', 'ngAnimate', 'ngSanitize', 'angularStart.services', 'angularStart.directives']);

希望对你有所帮助:)

一旦您可以进行良好的设置，Browserify 肯定会很棒！