将 webpack 与现有的 requirejs 应用程序一起使用

Question

我正在使用在其构建系统中使用 RequireJS 的现有应用程序 (canvas-lms)。我正在开发一个插入 Canvas 的伪独立应用程序（Canvas 用语中的“client_app”）。这是一个仅使用字体端的应用程序，它使 API 调用回主机 Canvas 应用程序。对我的问题来说，细节并不是很重要——client_app 需要做的就是有一个构建脚本，在 Canvas 应用程序树的定义位置输出一个 JS 文件。

我正在尝试使用 Webpack 而不是 RequireJS 来构建我的应用程序。如果我将所有依赖项保持独立（例如 npm-install 我需要的一切），一切都会很好；但是，Canvas 已经提供了许多这些依赖项（例如 React、jQuery），并且在 jQuery 的情况下，它提供了一个我想使用的修补版本。这就是我开始遇到问题的地方。

让 React 工作很容易； Canvas 用凉亭安装它，所以我可以在我的webpack config to point at it 中添加一个alias：

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 has been made anonymous -- 将其恢复为股票行为没有任何区别。

我希望能够执行 var $ = require('jquery') 或 import $ from 'jquery' 之类的操作，并让 webpack 执行使用 jquery.instructure-jquery-patches 所需的任何魔法、文档不完整的巫术。

我尝试在我的webpack.config.js 文件中添加resolve.root 的路径：

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.instructure-jquery-patches.中似乎没有jQuery

它是，但是，在页面加载后在全局范围内可用，因此正在评估和执行 jQuery。

我的猜测是我遇到了某种 requirejs/amd 异步问题，但这是在黑暗中的一次尝试。我对 requirejs 或 amd 的了解不够，无法确定。

Answer 1

TobiasK 的 comment 指出我需要将 amd: { jQuery: true } 添加到我的 webpack 配置中。现在一切正常。