Использование webpack с существующим приложением requirejs

Я работаю с существующим приложением (canvas-lms), который использует RequireJS в своей системе сборки. Я работаю над псевдо-автономным приложением, которое подключается к Canvas ( "client_app" на языке Canvas). Это приложение, основанное только на шрифтах, которое возвращает API-вызовы в приложение Canvas для хоста. Детали не очень важны для моего вопроса - все, что требуется client_app, - это иметь конструкцию script, которая выплевывает JS файл в определенном месте в дереве приложений Canvas.

Я пытаюсь использовать Webpack для создания своего приложения вместо RequireJS. Все отлично работает, если я сохраняю все свои зависимости автономными (например, npm-install все, что мне нужно); однако Canvas уже предоставляет многие из этих зависимостей (например, React, jQuery) и в случае jQuery, он предоставляет исправленную версию, которую я хотел бы использовать вместо этого. Здесь я начинаю испытывать проблемы.

Получение реакции на работу было легким; Canvas устанавливает его с помощью bower, поэтому я смог добавить alias в мой конфигурацию webpack, чтобы указать на него:

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

(__dirname + /vendor/canvas является символической ссылкой в моем дереве приложений в дерево приложений Canvas)

В тех случаях, когда у меня возникают проблемы, вы пытаетесь загрузить предоставленную копию jQuery.

Canvas имеет следующую структуру 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 - выглядит как стандартный плагин jquery.cookie, завернутый в AMD:

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

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

});

и, наконец, /public/javascripts/vendor/jquery-1.7.2.js. Не собирается вставлять его, поскольку он имеет стандартный jQuery1.7.2, за исключением того, что AMD define был анонимным - возвращая его в поведение запаса не имеет значения.

Я хочу иметь возможность делать что-то вроде var $ = require('jquery') или import $ from 'jquery' и иметь webpack делать любую магию, плохо документированную вуду, которую нужно сделать, чтобы использовать jquery.instructure-jquery-patches.

Я попытался добавить путь к resolve.root в мой 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'
  }
},

Это должно означать, что когда я делаю a require('jquery'), он сначала находит /public/javascripts/jquery.js, который определяет модуль с instructure_jquery_patches как зависимость. Это попадает в instructure_jquery_patches, который определяет модуль с двумя зависимостями ('vendor/jquery-1.7.2', 'vendor/jquery.cookie').

В моей основной точке входа (index.js), я импортирую jQuery (также пытался использовать commonjs, без разницы) и пытаясь использовать его:

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

Построение пакета с webpack, похоже, сработает; ошибок нет. Однако, когда я пытаюсь загрузить страницу в браузере, я получаю сообщение об ошибке внутри jquery.instructure-jquery-patches.js:

Казалось бы, jQuery не доступен в jquery.instructure-jquery-patches.

Он , однако доступен в глобальной области после загрузки страницы, поэтому jQuery оценивается и выполняется.

Я предполагаю, что я сталкиваюсь с проблемой асинхронности requirejs/amd, но это выстрел в темноте. Я не знаю достаточно о requirejs или amd, чтобы знать наверняка.

Ответ 1