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

Question

我正在使用在其构建系统中使用RequireJS 的现有应用程序(canvas-lms).我正在开发一个插入Canvas的伪独立应用程序(Canvas一句中的"client_app").这是一个仅限于fontend的应用程序,可以将API调用回主机Canvas应用程序.详细信息对我的问题并不十分重要 ​​- client_app需要做的就是拥有一个构建脚本,该脚本在Canvas应用程序树中定义的位置吐出一个JS文件.

我正在尝试使用Webpack构建我的应用程序而不是RequireJS.如果我保持所有依赖项都是自包含的(例如npm-install我需要的所有内容),那么一切都很有效; 但是,Canvas已经提供了许多这些依赖项(例如React,jQuery),而在jQuery的情况下,它提供了一个我想要使用的修补版本.这是我开始遇到问题的地方.

让React工作很容易; 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.不会粘贴它,因为它是bog标准的jQuery1.7.2,除了AMD定义已经匿名 - 将其恢复为股票行为并没有什么区别.

我希望能够做类似的事情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 require,没有区别),并尝试使用它:

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的评论指出我需要添加amd: { jQuery: true }到我的webpack配置.现在一切正常.