2016-01-29 18 views
24

Sto caricando jQuery da una CDN e questo errore si verifica quando si tenta di importare FullCalendar nei miei scritti:Browserify FullCalendar con jQuery esterna

Uncaught Error: Cannot find module 'jquery'

Ecco il mio script:

'use strict' 

import $ from 'jquery' 
import 'fullcalendar' 

$('#calendar').fullCalendar() 

I' m eseguendo questo comando per trasformare il mio script:

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

Il mio codice HTML assomiglia a questo:

<!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> 

Ho anche provato browserify-shim con depends: ['jquery', 'moment'] ma non fa alcuna differenza.

Ho il sospetto che sia perché il file FullCalendar JS ha un wrapper UMD che fa il proprio require('jquery') e require('moment') ma ho pensato che il flag esterno sarebbe stato abbastanza intelligente da rilevare questo.

Qualsiasi modo per aggirare questo problema?

Update: Questo è stato un esempio minimo di quello che sto cercando di realizzare, tuttavia il mio codice vero e coinvolge molti più dipendenze rispetto FullCalendar, e tutte le dipendenze di terze parti sono concatenati in un file vendor.min.js, separato dal nostro codice (ad esempio, index.js).

+0

Hai provato a utilizzare [l'esposizione globale] (https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global) parte di browserify-shim? – zero298

+0

@ zero298 La libreria si attacca semplicemente a '$' senza esporre nulla in cui credo. Ho ottenuto altri plugin jQuery per funzionare correttamente con il jQuery esterno (con o senza shim), ma non questo per qualche motivo. –

+0

cosa succede se cambi lo script in "import $" invece di "import $ da" jquery "? – Anthony

risposta

6

Sono riuscito a farlo funzionare cambiando require('jquery') nella factory fullcalendar a $.

Inoltre, non è necessario utilizzare import $ from 'jquery' nel file index.js. È già una dipendenza nel fullcalendar npm.

Dopo aver eseguito

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

Modificare il file index.min.js nella funzione fullcalendar fabbrica in cui si legge:

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

a:

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

In alternativa, si potrebbe effettua questa modifica direttamente nel file node_modules/fullcalendar/dist/fullcalendar.js.

Spero che questo aiuti!

+2

Questa non è esattamente un'opzione valida perché il mio caso d'uso effettivo comporta la concatenazione di tutte le dipendenze di terze parti (con l'eccezione di jQuery) in un ' vendor.js', ed è anche irragionevole chiedere a tutti i membri del team di modificare un file all'interno di node_modules ogni volta che si installa. –

Problemi correlati