$は、webpack-2を使ってバンドルしたときに空のオブジェクトです

Question

最近、ビルドプロセスをGruntからwebpack-2に移動することを考えています。私たちのコードは、requirejsを使って完全にAMD形式で書かれています。デモの目的で、私が使用しているindex.jsファイルの最小限のバージョンを投稿します。

ファイルをコミットする際にjQuery-1.6.4が使用され、npm経由でロードされるリンクがあります。当分の間、これを許してください。 require-config.jsファイル対応jQuery-1.6.4

index.js

define(['jQuery', 'arrayUtils'], function ($, arrayUtils) { 
    'use strict'; 
    console.log($); 
    console.log(arrayUtils); 

}); 

：

(function() { 
    'use strict'; 

    require.config({ 
     baseUrl: '../../src', 
     waitSeconds: 0, 
     paths: { 
      jQuery: '/path to/jquery-1.6.4', 
      urlUtils: '/path to/urlUtils', 
      // ... 
     }, 
     shim: { 
      jQuery: { 
       exports: '$' 
      }, 
      urlUtils: { 
       exports: 'urlUtils' 
      }, 
      // ... 
     } 
    }); 
})(); 

を、私は私達のAMDのアプローチを使用しようとしたが、WebPACKの-2を使用して、すべてをバンドルします。私はドキュメントやさまざまなブログを見て、古いgold jQueryを除いてすべてが魅力的に機能するようにするconfigを見つけました。ここ

webpack-2によって生成されたファイルwebpack.config.js

var webpack = require('webpack'); 
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 

// Import the plugin: 
var path = require('path'); 
var env = require('yargs').argv.mode; 
var outputFile; 

var options = { 
    target: 'this' 
}; 
var libOptions = { 
    name: 'heatmap-inject', 
    version: JSON.stringify(require("./package.json").version) 

}; 

var plugins = []; 


if (env === 'build') { 
    plugins.push(new UglifyJsPlugin({ 
    sourceMap: true, 
    minimize: true 
    })); 
} 

// At the end of the file: 
module.exports = { 
    entry: __dirname + '/src/library.js', 
    devtool: 'source-map', 
    output: { 
    path: __dirname + '/dist/webpack', 
    library: 'library.js', 
    filename: libOptions.name + '.js', // libOptions.name + (options.target ? '.' + options.target : '') + (env === 'build' ? '.min.js' : '.js') 
    libraryTarget: options.target || 'umd', 
    umdNamedDefine: true 
    }, 
    module: { 
    rules: [{ 
     test: /(\.js)$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['es2015'], 
      plugins: [] 
     } 
     } 
    }, { 
     enforce: 'pre', 
     test: /(\.js)$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
     loader: 'eslint-loader', 
     options: {} 
     } 
    }, { test: /jQuery/, loader: 'exports-loader?$' 
    }, { test: /urlUtils/, loader: 'exports-loader?urlUtils' 
    }] 
    }, 
    resolve: { 
    alias: { 
    'jQuery': 'heatmaps/vendor/jquery-1.6.4', 
    'urlUtils': 'lib/heatmap/UrlUtils' 
    }, 
    modules: [ 
     'src/**/*.js', 
     'src/bower_components', 
     path.resolve('./src') 
    ], 
    extensions: ['.js'] 
    }, 
    plugins: plugins 
}; 

ある$.fnは、それが普通空のオブジェクトのjQueryの関数である代わり$のすなわち定義されていないことを示すエラーをスロー。 ウィンドウ$が定義されていて正しいjQuery関数が返されますが、なぜ私は$と同じ結果になっていませんか？ AMDの場合、$が終了して1.6.4 jQueryを返すので、私は正しい結果を得ています。 webpackを使用すると、奇妙な動作をします。

!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(1), __webpack_require__(13) ], __WEBPACK_AMD_DEFINE_RESULT__ = function ($, urlUtils) { ... }

私が試してみました他にはどんなもの：

1. { test: /jQuery/, loader: 'expose-loader?$'
2. { test: /jQuery/, loader: 'exports-loader?jQuery=jQuery,$=jQuery,this=>window'
3. ​​
4. { test: /jQuery/, loader: 'expose-loader?$=jQuery'

externalsプロパティを使用できません。これは、window.jQueryを汚染し、このライブラリがユーザーのWebサイトに挿入/ロードされるため、ターゲットソース上のものが破損します。

私を助けてください！私はこの不思議なjQueryのことで今や不満です。

Answer 1

これはおそらくthe version of jQuery you are using is before a jQuery AMD fixです。 jQuery 2.2.1と3.0では、多数の大規模なAMDコードベースをESモジュールに移植しました。ビルドのenvでjQueryのjankinessを乗り越えるために私が使用したメインのスタックオーバーフローポストは、jhhns自身によってthis very thorough answerでした。

特に、jQueryの上でjQuery UIを使用している場合は、提供プラグインを使用して、必要な特定のモジュールをインポートするプラグインモジュールを使用することが重要です。特に彼らが特定の順序を持​​っている場合、彼らは問題のアプリの残りの周りにロードする必要があります。あなたが後で必要jQueryの名前空間を与えるすべてのあなたの依存関係のために（最初にまたはそれに近い）最初にこのモジュールをインポートする

// jquery-plugins.js 
// import $ from 'jquery' is implicit because of the provide plugin 
import 'jquery-ui' 
import 'malihu-custom-scrollbar' 
import 'datatables' 

：ESのモジュールと

（AMDはあまりにも動作します）。