Webpack：ProvidePluginとexpose-loaderを使用せずにグローバル変数を公開する

Question

私はこのReactJSプロジェクトで作業していますが、サブフォルダpackage.jsonを読み込み、それらをnode_modulesにインストールした後、グローバル変数をコード内のどこでも使用できるようにします。

問題は、webpack.config.js（私はそれらを動的に追加する必要がある）の構文のためにexpose-loader上のjsonsにアクセスできないため、代わりに次のように追加するローダーを作成しました。 package.jsonをテストし、依存関係を取得して公開ローダーの動作を複製しようとします。

これは

var toCamelCase = function(str) { 
    return str.toLowerCase() 
    .replace(/[-_]+/g, ' ') 
    .replace(/[^\w\s]/g, '') 
    .replace(/ (.)/g, function($1) { return $1.toUpperCase(); }) 
    .replace(/ /g, ''); 
} 

var returning_string = function(dependencies_object){ 
    var final_string = ""; 
    Object.keys(dependencies_object).map(function(dependency){ 
     var location = require.resolve(dependency); 
     var export_dependency = 'module.exports = global["'+toCamelCase(dependency)+'"] = require("-!'+ location+'");'; 
     final_string += export_dependency; 
    }) 
    return final_string; 
}; 

module.exports = function() {}; 
module.exports.pitch = function(e){ 
    if(this.cacheable) {this.cacheable();} 
    var dependencies = require(e).dependencies; 
    return returning_string(dependencies); 
}; 

問題では出力がまったく同じであっても、それは仕事をして公開するローダーを使用しながら、何らかの理由で、それはグローバルコンテキストにライブラリを追加していないことです。両方のことをするときに、私は手動で後で何とかして複製する必要があるプラグインを提供する依存関係を追加しました。

これを行うにはもっと良い方法はありますか？または私は正しいことをしていますが、何かが欠けていますか？

Answer 1

が研究した後、私は（私はWebPACKの1.xのを使用していますが、私はphylosophyは私のバージョンのために有効であると思います）following WebPACKの2.xで見つけた構成に関するドキュメントは言う：

書き込みと実行機能の一部を生成する

この問題への私のアプローチは、新しいプラグインを使用するのではなく、動作するものを再利用することです。基本的に私はwebpack.configの方法で必要なすべてのローダーを作成する新しいjavascriptファイルを作成しました。

これはファイルです：

dependencies_loader.js https://gist.github.com/abenitoc/b4bdc02d3c7cf287de2c92793d0a0b43

そして、これがaproximately私はそれを呼び出す方法です：

var webpack = require('webpack'); 
var dependency_loader = require('./webpack_plugins/dependencies_loader.js'); 


module.exports = { 
    devtool: 'source-map', 
    entry: {/* Preloading */ }, 
    module: {preLoaders: [/*Preloading*/], 
    loaders: [/* Call all the loaders */].concat(dependency_loader.getExposeString()), 
    plugins: [ 
    new webpack.ContextReplacementPlugin(/package\.json$/, "./plugins/"), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.ProvidePlugin(Object.assign({ 
     '$': 'jquery', 
     'jQuery': 'jquery', 
     'window.jQuery': 'jquery' 
    }, dependency_loader.getPluginProvider())), // Wraps module with variable and injects wherever it's needed 
    new ZipBundlePlugin() // Compile automatically zips 
] 

私は追加ローダーの配列をCONCATお知らせ必要なgetExposeString（）を持つ次のローダを使用して、getPluginProviderを使用してpluginProviderの新しいグローバル要素でオブジェクトを再割り当てします。 また、jsHintを使用しているため、グローバル名を除外しています。その理由は他の方法です。

これはnode_modules依存関係のみを解決するため、ローカルライブラリが必要な場合は別の方法があります。