gulp4和browserify任务包错误找到模块

Question

任务完成而没有错误但页面投放时，这是错误：

Uncaught ReferenceError: appRoot is not defined 

一饮而尽模块使用（没有被列入黑名单）：

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

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

吞任务：

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肯定是很大的，一旦你可以得到一个不错的成立工作！