任务完成且没有错误,但是在提供页面时,这是错误:
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
答案 0 :(得分: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肯定很棒!