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

Using webpack with an existing requirejs application

提问by grahamb

I am working with an existing application (canvas-lms) that uses RequireJS in its build system. I'm working on a pseudo-standalone application that plugs into Canvas (a "client_app" in Canvas parlance). This is a fontend-only app that makes API calls back to the host Canvas app. The details aren't terribly important for my question - all a client_app needs to do is have a build script that spits out a JS file in a defined place within the Canvas app tree.

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

I'm trying to use Webpack to build my app instead of RequireJS. Everything works great if I keep all my dependencies self-contained (e.g. npm-install everything I need); however, Canvas already provides many of these dependencies (e.g. React, jQuery), and in jQuery's case, it provides a patched version that I'd like to use instead. This is where I start to have problems.

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

Getting React to work was easy; Canvas installs it with bower, so I was able to add an aliasin my webpack config to point at it:

让 React 工作起来很容易；Canvas 使用 bower 安装它，所以我能够alias在我的webpack 配置中添加一个指向它：

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

(__dirname + /vendor/canvasis a symlink in my application tree to the host Canvas application's tree)

（__dirname + /vendor/canvas是我的应用程序树中到宿主 Canvas 应用程序树的符号链接）

Where I'm having trouble is trying to load the provided copy of jQuery.

我遇到问题的地方是尝试加载提供的 jQuery 副本。

Canvas has the following jQuery structure:

Canvas 具有以下 jQuery 结构：

/public/javascripts/jquery.js:

/public/javascripts/jquery.js：

define(['jquery.instructure_jquery_patches'], function($) {
  return $;
});

/public/javascripts/jquery.instructure_jquery_patches.js:

/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-- looks like the standard jquery.cookie plugin, wrapped in an AMD define:

/public/javascripts/vendor/jquery.cookie.js-- 看起来像标准的 jquery.cookie 插件，包装在 AMD 定义中：

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

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

});

and finally, /public/javascripts/vendor/jquery-1.7.2.js. Not going to paste it in, since it's bog-standard jQuery1.7.2, except that the AMD define has been made anonymous-- reverting it to the stock behaviour doesn't make a difference.

最后，/public/javascripts/vendor/jquery-1.7.2.js。不打算粘贴它，因为它是沼泽标准的 jQuery1.7.2，除了AMD 定义已经匿名——将其恢复为股票行为并没有什么区别。

I want to be able to do something like var $ = require('jquery')or import $ from 'jquery'and have webpack do whatever magic, poorly-documented voodoo it needs to do to use jquery.instructure-jquery-patches.

我希望能够做一些类似的事情，var $ = require('jquery')或者import $ from 'jquery'让 webpack 做任何魔法，记录不充分的伏都教它需要使用jquery.instructure-jquery-patches.

I've tried adding the path to resolve.rootin my webpack.config.jsfile:

我试过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'
  }
},

This should mean that when I do a require('jquery'), it first finds /public/javascripts/jquery.js, which defines a module with instructure_jquery_patchesas a dependency. That falls into instructure_jquery_patches, which defines a module with two dependencies ('vendor/jquery-1.7.2', 'vendor/jquery.cookie').

这应该意味着当我执行 a 时require('jquery')，它首先找到/public/javascripts/jquery.js，它定义了一个具有instructure_jquery_patches依赖项的模块。这属于instructure_jquery_patches，它定义了一个具有两个依赖项 ( 'vendor/jquery-1.7.2', 'vendor/jquery.cookie')的模块。

In my main entry point (index.js), I am importing jQuery (also tried a commonjs require, no difference), and trying to use it:

在我的主要入口点（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);
}

Building the bundle with webpack seems to work; there are no errors. When I try to load the page in the browser, though, I'm getting an error from within jquery.instructure-jquery-patches.js:

使用 webpack 构建捆绑包似乎有效；没有错误。但是，当我尝试在浏览器中加载页面时，我从内部收到错误消息jquery.instructure-jquery-patches.js：

It would seem that jQuery is not availble within jquery.instructure-jquery-patches.

似乎 jQuery 在内部不可用 jquery.instructure-jquery-patches.

It is, however, available in the global scope after the page loads, so jQuery is being evaluated and executed.

它是然而，在页面加载后在全球范围内都有效，所以jQuery是被评估和执行。

My guess is that I'm running into some sort of requirejs/amd asynchronicity problem, but that's a shot in the dark. I don't know enough about requirejs or amd to know for sure.

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

回答by grahamb

TobiasK's commentpointed me at needing to add amd: { jQuery: true }to my webpack config. Everything is working now.

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