Question

我正在使用gulp + browserify捆绑我的源代码，但我总是遇到同样的错误：找不到jQuery。请确保在SignalR客户端JavaScript文件之前引用jQuery。 SignalR get $ = undefined ...

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

这是我的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);
}

我已经尝试使用带全局选项的browserify-shim变换，但这也不行。

Answer 1

您仍然需要将jQuery导入代码中。 browserify-shim的depends部分告诉它jQuery在bundle中的SignalR之前。它没有说你导入SignalR时会先自动导入jQuery。

确切的解决方案取决于SignalR是否期望jQuery简单地出现在bundle中，是否期望jQuery出现在window对象上，或者SignalR是否是一个可能需要手动附加的jQuery插件到$对象。

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

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

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

Browserify + shim on jquery和signalR无效

1 个答案: