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

Question

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

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

Получение реакции на работу было легким; Холст устанавливает его с дачей, так что я был в состоянии добавить alias в моем webpack config to point at it:

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

(__dirname + /vendor/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 has been made anonymous - возврат его к поведению запаса не имеет значения.

Я хочу, чтобы иметь возможность сделать что-то вроде 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' 
    } 
}, 

Это должно означать, что, когда я делаю 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, чтобы знать наверняка.

Answer 1

TobiasK's comment указал мне на необходимость добавить amd: { jQuery: true } в мою конфигурацию webpack. Сейчас все работает.