1

ソースをバンドルするためにgulp + browserifyを使用していますが、常に同じエラーが発生しました：jQueryが見つかりませんでした。SignalR クライアント JavaScript ファイルの前に jQuery が参照されていることを確認してください。SignalR get $ = 未定義...

ソースをベンダーとアプリの 2 つのバンドルに分割しました。ベンダー バンドルは、packages.json から lib の ID を取得し、バンドルはそれを必要とします。アプリ バンドルはメイン エントリを取得し、id の lib を bundle.external を使用してこのバンドルに渡します。

ここで私の 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 transform をオプション global で使用しようとしていますが、これも機能しません。

4

1 に答える 1

0

jQuery をコードにインポートする必要があります。dependsbrowserify-shimのセクションは、バンドル内で jQuery が SignalR の前に来ることを示しています。SignalR をインポートするたびに、最初に jQuery が自動的にインポートされるとは言いません。

正確な解決策は、SignalR が jQuery が単にバンドルに存在することを期待しているかどうか、jQuery がwindowオブジェクトに存在することを期待しているかどうか、または SignalR がオブジェクトに手動でアタッチする必要がある可能性のある jQuery プラグインであるかどうかによって異なり$ます。

私が試す最初の解決策は、SignalR をインポートする前に jQuery をインポートすることです。

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

import $ from 'jquery';
import 'signalR';
// Rest of app.js........
于 2016-01-15T14:58:47.353 に答える