Utilizzo di webpack con un'applicazione requirejs esistente

Question

Sto lavorando con un'applicazione esistente (canvas-lms) che utilizza RequireJS nel suo sistema di compilazione. Sto lavorando su un'applicazione pseudo-autonoma che si collega a Canvas (un "client_app" in gergo Canvas). Questa è un'app di tipo solo font che richiama le chiamate API all'app Canvas host. I dettagli non sono molto importanti per la mia domanda: tutto ciò che un client_app deve fare è avere uno script di compilazione che sputa un file JS in un punto definito all'interno della struttura dell'app Canvas.

Sto cercando di utilizzare Webpack per creare la mia app anziché RequireJS. Tutto funziona alla grande se tengo tutte le mie dipendenze autonome (ad es. Npm-installa tutto ciò di cui ho bisogno); tuttavia, Canvas fornisce già molte di queste dipendenze (ad esempio React, jQuery) e, nel caso di jQuery, fornisce invece una versione con patch che vorrei utilizzare. Questo è dove comincio ad avere problemi.

Reagire al lavoro è stato facile; Tela lo installa con pergolato, così mi è stato in grado di aggiungere un alias nel mio webpack config to point at it:

alias: { 
    'react': __dirname + '/vendor/canvas/public/javascripts/bower/react/react-with-addons', 
} 

(__dirname + /vendor/canvas è un link simbolico nel mio albero applicazione per albero dell'applicazione Canvas host)

Dove sto avendo il problema sta provando a caricare la copia fornita di jQuery.

Canvas ha la seguente struttura jQuery:

/public/javascripts/jquery.js:

define(['jquery.instructure_jquery_patches'], function($) { 
    return $; 
}); 

/public/javascripts/jquery.instructure_jquery_patches.js:

define(['vendor/jquery-1.7.2', 'vendor/jquery.cookie'], function($) { 
    // does a few things to patch jquery ... 
    // ... 
    return $; 
}); 

/public/javascripts/vendor/jquery.cookie.js - si presenta come il plugin jquery.cookie di serie, avvolto in un AMD definire :

define(['vendor/jquery-1.7.2'], function(jQuery) { 

jQuery.cookie = function(name, value, options) { 
    //...... 
}; 

}); 

e, infine, /public/javascripts/vendor/jquery-1.7.2.js. Non andando a incollarlo, poiché è jQuery1.7.2 standard di bog, tranne per il fatto che lo AMD define has been made anonymous - ripristinarlo al comportamento dello stock non fa la differenza.

Voglio essere in grado di fare qualcosa come var $ = require('jquery') o import $ from 'jquery' e fare in modo che il webpack faccia qualsiasi magia, voodoo scarsamente documentato che deve fare per usare jquery.instructure-jquery-patches.

Ho provato ad aggiungere il percorso per resolve.root nel mio file webpack.config.js:

resolve: { 
    extensions: ['', '.js', '.jsx'], 
    root: [ 
    __dirname + '/src/js', 
    __dirname + '/vendor/canvas/public/javascripts' 
    ], 
    alias: { 
    'react': 'react/addons', 
    'react/addons/lib': 'react/../lib' 
    } 
}, 

Questo dovrebbe significare che quando faccio una require('jquery'), che prima trova /public/javascripts/jquery.js, che definisce un modulo con instructure_jquery_patches come una dipendenza. Quello cade in instructure_jquery_patches, che definisce un modulo con due dipendenze ('vendor/jquery-1.7.2', 'vendor/jquery.cookie').

Nel mio principale punto di accesso (index.js), sto importando jQuery (anche provato un commonjs richiedono, nessuna differenza), e cercando di usarlo:

import React from 'react';  


import $ from 'jquery'; 
$('h1').addClass('foo');  

if (__DEV__) { 
    require('../scss/main.scss'); 
    window.React = window.React || React; 
    console.log('React: ', React.version); 
    console.log('jQuery:', $.fn.jquery); 
} 

Costruire il bundle con webpack sembra funzionare; non ci sono erroriQuando provo a caricare la pagina nel browser, però, sto ricevendo un errore dall'interno jquery.instructure-jquery-patches.js:

Sembrerebbe che jQuery non è availble entro jquery.instructure-jquery-patches.

E è , tuttavia, disponibile nell'ambito globale dopo il caricamento della pagina, quindi jQuery viene valutato ed eseguito.

La mia ipotesi è che sto correndo in una sorta di requirejs/amd problema asincronia, ma questo è un salto nel buio. Non ne so abbastanza di requirejs o amd per saperlo con certezza.

Answer 1

TobiasK's comment mi ha segnalato la necessità di aggiungere amd: { jQuery: true } alla mia configurazione del webpack. Tutto funziona ora.