Browserify +填充jquery和signalR无法正常工作 [英] Browserify + shim on jquery and signalR not working

问题描述

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

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

这里是我的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：{
依赖：[
jquery：jQuery

}，
moment：moment
} 
  
 
 
 
在这里，我的大嘴巴： 
 
 
 'use严格'; 
 
从'gulp'导入gulp; 
从'gulp-load-plugins'导入gulpLoadPlugins; 
从'browserify'导入browserify; 
从'browserify-incremental'导入browserifyInc; 
从'browserify-ng-html2js'导入ngHtml2Js; 
从'browserify-shim'导入垫片; 
从'xtend'导入xtend; 
从'tsify'导入tsify; 
从'babelify'导入babelify; 
从'minifyify'导入minifyify; 
从'vinyl-source-stream'进口来源; 
从'vinyl-buffer'导入缓冲区; 
从'browser-sync'导入browserSync; 
从'./package.json'导入packageJson; 
 
 const $ = gulpLoadPlugins（）; 
让bs = browserSync.create（）; 
 
让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）* 
 ************************************* / 
 
让extensions = ['.js'，'.json'，'.ts']; 
 
让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'
}）; 
 
 
函数compile（）{
 
 bundler.on（'log'，$ .util.log）; 
 
 browserifyInc（bundler，{
 cacheFile：'./.tmp/browserify-cache.json'
}）; 
 
 $ .util.log（'捆绑JS ...'）; 
 
返回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'
}）; 
 
函数compileVendor（）{
 
 bundlerVendor.on（'log'，$ .util.log）; 
 
 browserifyInc（bundlerVendor，{
 cacheFile：'./.tmp/browserify-vendor-cache.json'
}）; 
 
 $ .util.log（'捆绑供应商JS ...'）; 
 $ b返回bundlerVendor.bundle（）
 .pipe（$。plumber（{
 errorHandler：browserifyError 
}））
 .on（'error' ，（browserifyError）
 .pipe（source（'vendor.min.js'））
 .pipe（buffer（））
 .pipe（$。size（{
 title： '脚本供应商'
）））
 .pipe（gulp.dest（'Scripts / Dist'））
 .pipe（$。if（bs.active，bs.stream（{
 once：true 
}）））; 
} 
 
函数browserifyError（err）{
 error（err）; 
 this.end（）; 
} 
  
供应商捆绑包没有入口点，它只需要lib。 
在这里我的应用程序包条目：
  ///< reference path =_ references.ts/> 
 
导入'signalR'; 
导入'时刻'; 
导入'moment-business'; 
导入'moment-range'; 
导入'angular'; 
导入'angular-messages'; 
导入'angular-mocks'; 
导入'angular-animate'; 
导入'angular-file-upload'; 
导入'angular-notify'; 
导入'angular-i18n'; 
导入'angular-ui-bootstrap'; 
导入'angular-ui-router'; 
导入'angular-vs-repeat'; 
导入'邮政'; 
 
从'./route'导入路由; 
 import *作为'./config'中的配置; 
从'./registerModule'导入寄存器; 
从'./tools'中导入{camelize}; 
 
 let modules：Array< string> = [
 appName +'.Controllers'，
 appName +'.Directives'，
 appName +'.Filters'，
 appName +'.Services'，
 appName +'.Factory'，
 appName +'.Constant']; $（moduleName：string）：ng.IModule => angular.module（moduleName，[]））; 
 modules.forEach 
 
 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 * / 
 // utilization 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']; 
 
函数runAngular（$ rootScope：ng.IRootScopeService，
 $ location：ng.ILocationService，
 $ log：ng.ILogService）：void {
 
'严格使用'; 
 
 $ log.debug（'Démarragede l\'application：'，appName）; 
} 
  
我已经尝试使用全局选项browserify-shim转换，但这不起作用太。  
 
解决方案
您仍然需要将jQuery导入代码中。 browserify-shim的部分取决于部分，它告诉它jQuery在捆绑中的SignalR之前。它并没有说你每次输入SignalR时都会自动导入jQuery。
 
 
 
确切的解决方案取决于SignalR是否期望jQuery能够简单地存在于是否期望jQuery出现在窗口对象中，或者SignalR是否可能需要手动附加到 $  object。
 
 
 
我会尝试的第一个解决方案是在导入SignalR之前简单地导入jQuery： 
 
 
  ///< reference path =_ references.ts/> 
 
从'jquery'导入$; 
导入'signalR'; 
 //其余的app.js ........ 
  
 
I'm using gulp + browserify to bundle my source but i got always the same error : jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file. SignalR get $ = undefined...

I split my source into two bundle : vendor and app. Vendor bundle get lib's id from packages.json and the bundle require it. App bundle get main entry and i passe id's lib to this bundle with bundle.external.

Here 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"
  }
Here my gulp taks :
'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();
}
Vendor bundle haven't entry point, it only require lib.
Here my app bundle entry : 
/// <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);
}
I already try to use browserify-shim transform with option global but this not work too.  
解决方案
You still have to import jQuery into your code. The depends section of browserify-shim just tells it that jQuery comes before SignalR in the bundle. It doesn't say that any time you import SignalR that it will automatically import jQuery first.

The exact solution depends on whether SignalR is expecting jQuery to simply be present in the bundle, whether it expects jQuery to be present on the window object, or whether SignalR is a jQuery plugin that could potentially need attaching manually to the $ object.

The first solution I'd try is to simply import jQuery before you import SignalR:
/// <reference path="_references.ts" />

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


                        
这篇关于Browserify +填充jquery和signalR无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！