2016-01-29 5 views
24

ich jQuery von einem CDN geladen und dieser Fehler tritt auf, wenn ich versuche, FullCalendar in meine Skripte zu importieren:Browserify FullCalendar mit externer jQuery

Uncaught Error: Cannot find module 'jquery'

Hier ist mein Skript:

'use strict' 

import $ from 'jquery' 
import 'fullcalendar' 

$('#calendar').fullCalendar() 

I‘ m diesen Befehl ausführen, um mein Skript zu transformieren:

browserify index.js -t babelify -x jquery > index.min.js 

Mein HTML sieht so aus:

<!DOCTYPE html> 
<div id=calendar></div> 
<script src=https://code.jquery.com/jquery-2.2.0.min.js></script> 
<script src=index.min.js></script> 

Ich habe auch browserify-shim mit depends: ['jquery', 'moment'] versucht, aber es macht keinen Unterschied machen.

Ich vermute, dass es ist, weil die FullCalendar JS-Datei ein UMD-Wrapper hat, der seine eigene tut require('jquery') und require('moment') aber ich dachte, das externe Flagge intelligent genug sein würde, dies zu erkennen.

Wie kann ich dieses Problem umgehen?

Update: Dies war ein minimales Beispiel für das, was ich versuche zu erreichen, aber mein tatsächlicher Code enthält viel mehr Abhängigkeiten als FullCalendar, und alle Abhängigkeiten von Drittanbietern sind in eine vendor.min.js Datei getrennt von unserem Code (wie index.js).

+0

Haben Sie [expose global] (https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global) als Teil von browserify-shim verwendet? – zero298

+0

@ zero298 Die Bibliothek fügt sich nur an $ an, ohne etwas zu enthüllen, was ich glaube. Ich habe andere jQuery-Plugins bekommen, die erfolgreich mit der externen jQuery funktionieren (entweder mit oder ohne Shim), nur nicht aus irgendeinem Grund. –

+0

Was passiert, wenn Sie das Skript zu 'import $' anstelle von 'import $ von 'jquery' ändern? – Anthony

Antwort

6

Ich konnte es durch Ändern require('jquery') in der Vollkalender-Fabrik zu $ arbeiten.

Sie müssen auch import $ from 'jquery' nicht in Ihrer index.js-Datei verwenden. Es ist bereits eine Abhängigkeit im Vollkalender npm.

Nach dem Ausführen

browserify index.js -t babelify -x jquery > index.min.js 

Bearbeiten Sie die index.min.js Datei in der fullcalendar Factory-Funktion, wo es heißt:

else if(typeof exports === 'object') { 
    module.exports = factory(require('jquery'), require('moment')); 
} 

zu:

else if(typeof exports === 'object') { 
    module.exports = factory($, require('moment')); 
} 
Alternativ

, könnten Sie Nehmen Sie diese Bearbeitung direkt in der Datei node_modules/fullcalendar/dist/fullcalendar.js vor.

Ich hoffe, das hilft!

+2

zu arbeiten Dies ist nicht gerade ein gangbarer Weg, weil mein tatsächlicher Anwendungsfall umfasst alle Fremd Abhängigkeiten verketten (mit Ausnahme von jQuery) in ein ' vendor.js' Datei, und es ist auch unvernünftig jeden im Team zu fragen, eine Datei in ändern, jedes Mal node_modules bei der Installation. –