ES6、Webpack、およびBabelを使用したUMDスタイルモジュールのインポート

Question

これに関連するいくつかのStackOverflow質問が見つかりましたが、一致するものも問題も解決しません。

私は、ブラウザとサーバーで使用するためのライブラリをES6に作成しています。サーバーやブラウザ（popsicle、axios）で使用できるいくつかのHTTPリクエストライブラリが見つかりました。私は正常に両方の場所でこれらのライブラリを使用しているが、私のソースでそれらをインポートし、出力webpackedファイルを使用していくつかの問題を抱えています。

私は axiosライブラリをインポートしています

マイES6ソースファイルが

import axios from 'axios'; 

export default { 
    go: function() { 
     return axios.get('http://www.google.com'); 
    } 
}; 

あなたは私がtrue

に umdとumdNamedDefineにlibraryTargetを設定しています見ることができるように私のWebPACKの設定が

var webpack = require('webpack'); 
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 
var WebpackNotifierPlugin = require('webpack-notifier'); 
var path = require('path'); 
var env = require('yargs').argv.mode; 

var libraryName = 'library'; 
var source = '/src/test.js'; 

var plugins = [], 
    outputFile; 

if (env === 'build') { 
    plugins.push(new UglifyJsPlugin({ 
     minimize: true 
    })); 
    outputFile = libraryName + '.min.js'; 
} else { 
    outputFile = libraryName + '.js'; 
    plugins.push(new WebpackNotifierPlugin()) 
} 

var config = { 
    entry: __dirname + source, 
    devtool: 'source-map', 
    output: { 
     path: __dirname + '/lib', 
     filename: outputFile, 
     library: libraryName, 
     libraryTarget: 'umd', 
     umdNamedDefine: true 
    }, 
    externals: {}, 
    module: { 
     loaders: [{ 
      test: /(\.jsx|\.js)$/, 
      loader: 'babel', 
      exclude: /(node_modules|bower_components)/ 
     }, { 
      test: /(\.jsx|\.js)$/, 
      loader: "eslint-loader", 
      exclude: /node_modules/ 
     }] 
    }, 
    resolve: { 
     root: path.resolve('./src'), 
     extensions: ['', '.js'] 
    }, 
    plugins: plugins 
}; 

module.exports = config; 

です

私の.bablercは

です

{ 
    "presets": ["es2015"], 
    "plugins": ["add-module-exports", "babel-plugin-add-module-exports"] 
} 

scriptタグにブラウザを含めて使用することはできますが、ノードとのインポート時には使用できません。私はXMLHttpRequest is not definedを得る。 Axiosライブラリは、ブラウザではXMLHttpRequestを使用し、ノードではhttpを実行するとhttpを使用しますが、何らかの理由でサーバー上で実行されていることを検出していません。私はいくつかのUMLライブラリでこの問題を抱えていますので、特定のパッケージではないと思います。また、webpackやbabelを実行しないでES5ノードでこれらのライブラリを使用できるので、webpackの設定上の問題であると推測されます。

これらのUMDスタイルライブラリをES6で読み込み、サーバーとブラウザで使用できるWebpackとBabelでライブラリを生成するにはどうすればよいですか？

Answer 1

パッケージをできるだけ小さくするには、Fetch APIの使用をお勧めします。 UMDライブラリには、フェッチが便利な3種類のコンシューマがあります。

• のNode.jsは - 実装されていないが、ノード・フェッチのみのノードライブラリ（たSuperAgentのような無重い依存関係 、unirestとaxiosなどを使用して 共通の動作をポリフィルするを使用することができます - これらは、セキュリティ上の懸念 だけでなく、肥大化を追加します！）。
• ブラウザ - 取得WHATWG標準であり、最も近代的なブラウザで利用可能な ですが、古いブラウザ
• 同形/ユニバーサルをポリフィルするなどwhatwg-fetchなどNPMパッケージ を必要とするかもしれない - JavaScriptの同じブラウザと Node.jsの中で実行されていますあなたは進歩的なWebアプリケーションで見つけることができます。彼らはwhatwg-fetchまたは node.jsバージョンのフェッチを読み込むためにisomorphic-fetchという ライブラリを使用する必要があります。

これはプロジェクトのコンシューマが処理する必要がありますが、READMEには上記の3種類のユーザーのそれぞれの手順が含まれている必要があります。

Node.jsと同形命令は、基本的に以下のとおりです。彼らはまた、https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js前にフェッチポリフィルを読み込むことができCDNからスクリプトを使用してブラウザでは

require(‘node-fetch’); // or require(‘isomorphic-fetch’) 
const MyUMDLibrary = require('my-umd-library'); 
const myUMDLibrary = new MyUMDLibrary(); 

。

私はUMDライブラリ（see a working example I've contributed before for a UMD library）にrollupを使用することをお勧めしますが、Webpackも問題ではありません。 Fetchを使用してアプリケーション内に 'axios'依存関係を含めるのではなく、残してユーザーがパッケージをロードする方法（モジュールローダー、スクリプト、必須）を決めることができます。