À l'aide de webpack avec une application requirejs

Je suis en train de travailler avec une application existante (toile-lms) qui utilise RequireJS dans son système de construction. Je suis en train de travailler sur un pseudo-application autonome qui se connecte sur la Toile (un "client_app" en Toile de langage). C'est un fontend seule application qui fait des appels de l'API de retour à l'hôte Toile app. Les détails ne sont pas très important pour ma question - tout un client_app besoin de faire est d'avoir un script de build qui crache un fichier JS dans un endroit défini dans la Toile de l'app de l'arbre.

Je suis en train d'utiliser Webpack de construire mon appli au lieu de RequireJS. Tout fonctionne très bien si je garde toutes mes dépendances autonome (par exemple, npm-installer tout ce dont j'ai besoin); cependant, la Toile offre déjà un grand nombre de ces dépendances (par exemple, Réagir, jQuery), et en jQuery cas, il offre une version patchée que je voudrais utiliser à la place. C'est là que je commence à avoir des problèmes.

Arriver Réagir de travail était facile; Toile installe avec bower, j'ai donc été en mesure d'ajouter un alias dans mon webpack config à point à elle:

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

(__dirname + /vendor/canvas est un lien symbolique dans mon arborescence de l'application à l'hôte de la Toile de l'application de l'arbre)

Où j'ai de la difficulté est d'essayer de charger la condition copie de jQuery.

Toile a la suite de jQuery structure:

/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 -- ressemble à la norme jquery.cookie plugin, enveloppé dans un AMD définir:

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

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

});

et enfin, /public/javascripts/vendor/jquery-1.7.2.js. Ne va pas coller, puisque c'est de la tourbière-standard jQuery1.7.2, sauf que le AMD définir a été rendu anonyme -- retour au stock de comportement ne fait pas de différence.

Je veux être en mesure de faire quelque chose comme var $ = require('jquery') ou import $ from 'jquery' et ont webpack faire quelle que soit la magie, mal documenté vaudou qu'il doit faire pour utiliser jquery.instructure-jquery-patches.

J'ai essayé d'ajouter le chemin d'accès à resolve.root dans mon webpack.config.js fichier:

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

Cela signifie que quand je fais un require('jquery'), il trouve d'abord /public/javascripts/jquery.js, qui définit un module avec instructure_jquery_patches comme une dépendance. Qui tombe dans instructure_jquery_patches, qui définit un module avec deux dépendances ('vendor/jquery-1.7.2', 'vendor/jquery.cookie').

Dans mon point d'entrée principal (index.js), je suis de l'importation de jQuery (aussi essayé une commonjs besoin, pas de différence), et essayer de l'utiliser:

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);
}

Bâtiment le bundle avec webpack semble fonctionner; il n'y a pas d'erreurs. Quand j'essaye de charger la page dans le navigateur, si, j'obtiens une erreur de l'intérieur jquery.instructure-jquery-patches.js:

Il semblerait que jQuery n'est pas disponible dans jquery.instructure-jquery-patches.

Il est, cependant, une portée globale, après le chargement de la page, de sorte que jQuery est en cours d'évaluation et d'exécution.

Ma conjecture est que je suis en cours d'exécution dans une sorte de requirejs/amd asynchronicité problème, mais c'est un coup de feu dans l'obscurité. Je ne sais pas assez de requirejs ou amd pour en être sûr.

OriginalL'auteur grahamb | 2015-04-14