javascript – 使用webpack与现有的requirejs应用程序

我正在使用在其构建系统中使用RequireJS的现有应用程序( canvas-lms).我正在使用插入Canvas的伪独立应用程序(Canvas语法中的“client_app”).这是一个仅使用Fontend的应用程序,可以将API调用回主机Canvas应用程序.细节对我的问题来说不是非常重要 – 所有client_app需要做的是创建一个脚本,它会在Canvas应用程序树中的一个定义的地方吐出一个JS文件.

我试图使用Webpack构建我的应用程序而不是RequireJS.一切都很好,如果我保持所有的依赖关系自足(例如,npm-安装我需要的一切);但是,Canvas已经提供了很多这样的依赖关系(例如React,jQuery),而在jQuery的情况下,它提供了一个我想使用的修补版本.这是我开始遇到问题的地方.

获得反应很容易; Canvas可以安装它,因此我可以在我的webpack config to point at it中添加一个别名：

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’)或从’jquery’导入$的东西,并且让webpack做任何魔术,使用jquery.instructure-jquery-patches需要做的很少的voodoo.

我尝试在我的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在jquery.instructure-jquery-patches中是不可用的.

然而,在页面加载之后,它在全局范围内可用,因此正在评估和执行jQuery.

我的猜测是,我遇到某种需求/异步异步问题,但这是一个黑暗中的一枪.我不知道requirejs或amd肯定知道.

解决方法

TobiasK的 comment指出我需要将amd：{jQuery：true}添加到我的webpack config中.一切都在工作.