web-dev-qa-db-ja.com

既存のrequirejsアプリケーションでのWebpackの使用

ビルドシステムでRequireJSを使用する既存のアプリケーション（ canvas-lms ）を使用しています。 Canvasにプラグインする疑似スタンドアロンアプリケーション（Canvas用語では "client_app"）に取り組んでいます。これはfontend専用のアプリで、Host CanvasアプリにAPI呼び出しを返します。詳細は私の質問にとってそれほど重要ではありません-client_appが行う必要があるのは、Canvasアプリツリー内の定義された場所にJSファイルを吐き出すビルドスクリプトを用意することだけです。

RequireJSの代わりにWebpackを使用してアプリをビルドしようとしています。すべての依存関係を自己完結させたままにすれば、すべてがうまく機能します（たとえば、必要なすべてをnpm-installします）。ただし、Canvasはすでにこれらの依存関係の多く（React、jQueryなど）を提供しており、jQueryの場合は代わりに使用したいパッチバージョンを提供します。ここで私は問題を抱え始めます。

Reactの動作は簡単でした; Canvasはそれをbowerでインストールするので、 webpack構成にaliasを追加してそれを指すことができました ：

_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 -AMD定義でラップされた標準のjquery.cookieプラグインのように見えます：

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

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

});
_

そして最後に、 / public/javascripts/vendor/jquery-1.7.2.js です。 AMD定義が匿名になっている 以外は、それはbog標準のjQuery1.7.2であるため、貼り付けません-ストック動作に戻しても、差。

var $ = require('jquery')や_import $ from 'jquery'_のようなことができるようになり、_jquery.instructure-jquery-patches_を使用するために必要な魔法、文書化されていないブードゥーをWebpackに実行させたいです。

_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_を持つモジュールが定義されます。これは、2つの依存関係（_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_内からエラーが発生します。

enter image description here

JQueryは_jquery.instructure-jquery-patches._内では利用できないようです

これはisですが、ページのロード後にグローバルスコープで使用できるため、jQueryが評価および実行されています。

enter image description here

私の推測では、requirejs/AMDの非同期性の問題が発生しているようですが、それは暗闇の中でのショットです。 requirejsやAMDについては、よくわかりません。

javascriptrequirejswebpack
15
grahamb

TobiasKの comment は、AMD: { jQuery: true }をwebpack設定に追加する必要があることを指摘しました。現在、すべてが機能しています。

7
grahamb