Gulp Browserify&x2B；jquery上的垫片和信号器不工作

我正在使用gulp+browserify捆绑我的源代码，但我总是遇到相同的错误：找不到jQuery。请确保在SignalR客户端JavaScript文件之前引用jQuery。信号器获取$=未定义

我将源代码分为两个包：供应商和应用程序。供应商捆绑包从packages.json获取lib的id，捆绑包需要它。应用程序包获取主条目，并使用bundle.external将id的库传递到此包

这里是my packages.json：

  "browser": {
    "angular-notify": "./node_modules/angular-notify/dist/angular-notify.js",
    "angular-i18n": "./node_modules/angular-i18n/angular-locale_fr.js",
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "signalR": "./node_modules/ms-signalr-client/jquery.signalr-2.2.0.js",
    "moment": "./node_modules/moment/moment.js",
    "moment-business": "./Scripts/Vendor/js/moment-business.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "signalR": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "moment": "moment"
  }

这是我的大口：

'use strict';

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserify from 'browserify';
import browserifyInc from 'browserify-incremental';
import ngHtml2Js from 'browserify-ng-html2js';
import shim from 'browserify-shim';
import xtend from 'xtend';
import tsify from 'tsify';
import babelify from 'babelify';
import minifyify from 'minifyify';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import browserSync from 'browser-sync';
import packageJson from './package.json';

const $ = gulpLoadPlugins();
let bs = browserSync.create();

let dependenciesCss = [
  'bootstrap',
  'font-awesome',
  'animate.css'
];

let externalDependenciesjs = [
  'signalR',
  'moment-business'
];

let dependenciesJs = Object.keys(packageJson.dependencies).filter(
  key => (
    dependenciesCss.every(
      libCssName => (key.trim() !== libCssName)
    )
  )
);

dependenciesJs = dependenciesJs.concat(externalDependenciesjs);

/*************************************
 *          SCRIPTS (build)          *
 *************************************/

let extensions = ['.js', '.json', '.ts'];

let bundler = browserify(xtend(browserifyInc.args, {
    entries: 'Scripts/App/app.ts',
    debug: true,
    extensions,
    cache: {},
    packageCache: {},
    fullPaths: true
  }))
  .external(dependenciesJs)
  .plugin(tsify, {
    target: 'es6'
  })
  .transform(babelify.configure({
    extensions,
  }))
  .plugin(minifyify, {
    map: 'app.min.js.map',
    output: 'Scripts/Dist/app.min.js.map'
  });


function compile() {

  bundler.on('log', $.util.log);

  browserifyInc(bundler, {
    cacheFile: './.tmp/browserify-cache.json'
  });

  $.util.log('Bundling JS ...');

  return bundler.bundle()
    .pipe($.plumber({
      errorHandler: browserifyError
    }))
    .on('error', browserifyError)
    .pipe(source('app.min.js'))
    .pipe(buffer())
    .pipe($.size({
      title: 'scripts'
    }))
    .pipe(gulp.dest('Scripts/Dist'))
    .pipe($.if(bs.active, bs.stream({
      once: true
    })));
}

let bundlerVendor = browserify(xtend(browserifyInc.args, {
    debug: true,
    extensions,
    cache: {},
    packageCache: {},
    fullPaths: true
  }))
  .require(dependenciesJs)
  .plugin(minifyify, {
    map: 'vendor.min.js.map',
    output: 'Scripts/Dist/vendor.min.js.map'
  });

function compileVendor() {

  bundlerVendor.on('log', $.util.log);

  browserifyInc(bundlerVendor, {
    cacheFile: './.tmp/browserify-vendor-cache.json'
  });

  $.util.log('Bundling vendor JS ...');

  return bundlerVendor.bundle()
    .pipe($.plumber({
      errorHandler: browserifyError
    }))
    .on('error', browserifyError)
    .pipe(source('vendor.min.js'))
    .pipe(buffer())
    .pipe($.size({
      title: 'scripts vendor'
    }))
    .pipe(gulp.dest('Scripts/Dist'))
    .pipe($.if(bs.active, bs.stream({
      once: true
    })));
}

function browserifyError(err) {
  error(err);
  this.end();
}

供应商包没有入口点，它只需要lib。 这里是我的应用程序包条目：

/// <reference path="_references.ts" />

import 'signalR';
import 'moment';
import 'moment-business';
import 'moment-range';
import 'angular';
import 'angular-messages';
import 'angular-mocks';
import 'angular-animate';
import 'angular-file-upload';
import 'angular-notify';
import 'angular-i18n';
import 'angular-ui-bootstrap';
import 'angular-ui-router';
import 'angular-vs-repeat';
import 'postal';

import Route from './route';
import * as Configuration from './config';
import register from './registerModule';
import {camelize} from './tools';

let modules: Array<string> = [
  appName + '.Controllers',
  appName + '.Directives',
  appName + '.Filters',
  appName + '.Services',
  appName + '.Factory',
  appName + '.Constant'];
modules.forEach((moduleName: string): ng.IModule => angular.module(moduleName, []));

register();

modules.push('templates'); 
modules.push('ui.router');
modules.push('ui.bootstrap'); 
modules.push('angularFileUpload'); 
modules.push('ngAnimate'); 
modules.push('ngMessages'); 
modules.push('cgNotify'); 
modules.push('vs-repeat'); 

angular.module(appName, modules);

angular.module(appName)
  .config(
  ['$stateProvider', '$urlRouterProvider', '$locationProvider',
    ($stateProvider: ng.ui.IStateProvider,
      $urlRouterProvider: ng.ui.IUrlRouterProvider,
      $locationProvider: ng.ILocationProvider): Route => (
        new Route($stateProvider, $urlRouterProvider, $locationProvider)
        )
  ]);

angular.module(appName)
  .config(['$logProvider', ($logProvider: ng.ILogProvider): void => {
  $logProvider.debugEnabled(Configuration.ENABLED_CONSOLE_DEBUG);
}
]);

angular.module(appName)
  .config(
  ['$provide', ($provide: ng.auto.IProvideService): void => {
    /* tslint:disable:no-any */
    $provide.decorator('$exceptionHandler', ['$delegate', '$window', ($delegate: Function, $window: ng.IWindowService): any => {
      return (exception: any, cause: string): any => {
        /* tslint:enable:no-any */
        // utilisation du service $delegate pour formatter le message à afficher dans la console
        $delegate(exception, cause);
      };
    }]);
  }
  ]);

angular.module(appName)
  .config(
  ['$provide', '$httpProvider', ($provide: ng.auto.IProvideService, $httpProvider: ng.IHttpProvider): void => {
    $provide.factory('customHttpInterceptor', ['$q', ($q: ng.IQService) => {
      return {
        /* tslint:disable:no-any */
        'response': (response: any): any=> (camelize(response))
        /* tslint:enable:no-any */
      };
    }]);
    $httpProvider.interceptors.push('customHttpInterceptor');
  }]);

angular.module(appName).run(runAngular);

runAngular.$inject = ['$rootScope', '$location', '$log'];

function runAngular($rootScope: ng.IRootScopeService,
  $location: ng.ILocationService,
  $log: ng.ILogService): void {

  'use strict';

  $log.debug('Démarrage de l\'application : ', appName);
}

//
输入‘信号器’；
输入“时刻”；
进口“即时业务”；
输入“力矩范围”；
输入“角度”；
导入“角度信息”；
导入“角度模拟”；
导入“角度动画”；
导入“角度文件上传”；
导入“角度通知”；
输入‘angular-i18n’；
导入“角度ui引导”；
导入“角度ui路由器”；
导入“角度与重复”；
进口"邮政";；
从“./Route”导入路由；
将*作为配置从“/config”导入；
从“./registerModule”导入寄存器；
从“./tools”导入{camelize}；
let模块：数组=[
appName+“.Controller”，
appName+“.Directions”，
appName+“.Filters”，
appName+“.Services”，
appName+“.Factory”，
appName+'.常量']；
modules.forEach（（moduleName:string）：ng.IModule=>angular.module（moduleName，[]）；
寄存器（）；
modules.push（'templates'）；
modules.push（'ui.router'）；
modules.push（'ui.bootstrap'）；
modules.push（'angularFileUpload'）；
模块推送（'ngAnimate'）；
modules.push（'ngMessages'）；
modules.push（'cgNotify'）；
模块推送（'vs-repeat'）；
模块（appName，模块）；
angular.module（appName）
.config(
[“$stateProvider”、“$urlRouterProvider”、“$locationProvider”，
（$stateProvider:ng.ui.IStateProvider，
$urlRouterProvider:ng.ui.IUrlRouterProvider，
$locationProvider:ng.ILocationProvider）：路由=>(
新路由（$stateProvider、$urlRouterProvider、$locationProvider）
)
]);
angular.module（appName）
.config（['$logProvider'，（$logProvider:ng.ILogProvider）：void=>{
$logProvider.debugEnabled（配置.ENABLED\u控制台\u调试）；
}
]);
angular.module（appName）
.config(
['$PROFECT'，（$PROFECT:ng.auto.iproviderDevice）：void=>{
/*tslint:禁用：无任何*/
$provide.decorator（“$exceptionHandler”、[“$delegate”、“$window”、（$delegate:Function、$window:ng.IWindowService）：any=>{
返回（异常：any，原因：string）：any=>{
/*tslint:启用：无任何*/
//服务利用率$delegate pour formatter le messageáafficher dans la console
$delegate（例外情况、原因）；
};
}]);
}
]);
angular.module（appName）
.config(
['$PROFERE'，'$httpProvider'，（$PROFERE:ng.auto.iproviderVICE，$httpProvider:ng.IHttpProvider）：void=>{
$provide.factory（'customHttpInterceptor'，['$q'，（$q:ng.IQService）=>{
返回{
/*tslint:禁用：无任何*/
'response'：（response:any）：any=>（camelize（response））
/*tslint:启用：无任何*/
};
}]);
$httpProvider.interceptors.push（'customHttpInterceptor'）；
}]);
angular.module（appName）.run（runAngular）；
runAngular.$inject=['$rootScope'，'$location'，'$log']；
函数runScope:ng.IRootScopeService，
$location:ng.ILocationService，
$log:ng.ILogService）：无效{
"严格使用",；
$log.debug（'Démarrage de l'application:'，appName）；
}

---

我已经尝试将browserify shim transform与选项global一起使用，但这也不起作用

您仍然需要将jQuery导入到代码中。browserify shim的

dependens

部分只是告诉它jQuery在bundle中位于signer之前。它并没有说，无论何时导入signar，它都会首先自动导入jQuery

确切的解决方案取决于signer是否希望jQuery只出现在bundle中，它是否希望jQuery出现在

窗口
对象上，或者signer是否是一个jQuery插件，可能需要手动附加到
$
对象上

我尝试的第一个解决方案是在导入Signal之前简单地导入jQuery：

/// <reference path="_references.ts" />

import $ from 'jquery';
import 'signalR';
// Rest of app.js........

//
从“jquery”导入美元；
输入‘信号器’；
//app.js的其余部分。。。。。。。。
您仍然需要将jQuery导入到代码中。browserify shim的
dependens
部分只是告诉它jQuery在bundle中位于signer之前。它并没有说，无论何时导入signar，它都会首先自动导入jQuery

确切的解决方案取决于signer是否希望jQuery只出现在bundle中，它是否希望jQuery出现在
窗口
对象上，或者signer是否是一个jQuery插件，可能需要手动附加到
$
对象上

我尝试的第一个解决方案是在导入Signal之前简单地导入jQuery：

/// <reference path="_references.ts" />

import $ from 'jquery';
import 'signalR';
// Rest of app.js........

//
从“jquery”导入美元；
输入‘信号器’；
//app.js的其余部分。。。。。。。。
显示您在代码中使用信号器的位置？以及您的
app.js
和
vendor.js
条目文件。signar应该是
窗口
对象上的全局对象，还是仅在JavaScript包中？显示您在代码中使用signar的位置？以及您的
app.js
和
vendor.js
条目文件。signar应该是
窗口
对象上的全局对象，还是只在JavaScript包中？