webpackでブラウザとノードの両方を構築する

Question

私は最初のモジュールを書いています。基本的に、コードはブラウザとnode.jsのバージョンで全く同じです。唯一の違いは、ブラウザがXmlHttpRequestを使用し、node.jsがhttpモジュールを使用することです。

ここに私がしようとしているのと似た例があります。

// test.js 

const urlHelper = require('url'); 

class XmlHttpHandler { 
    constructor(xhr) { 
     this.xhr = xhr; 
    } 

    call(url, callback) { 
     this.xhr.open('GET', url, true); 
     this.xhr.onreadystatechange =() => { 
      if(this.xhr.readyState === 4) { 
       callback(this.xhr.status); 
      } 
     } 
     this.xhr.send(); 
    } 
} 

class HttpHandler { 
    constructor(http) { 
     this.http = http; 
    } 

    call(url, callback) { 
     const method = "GET"; 
     const { hostname, port, path } = urlHelper.parse(url);   

     this.http.request({ method, hostname, port, path }, 
     (response) => { 
      response.on('data', (chunk) => { }); 
      response.on('end',() => { callback(response.statusCode); }); 
     }).end(); 
    } 
} 

module.exports =() => typeof navigator !== 'undefined' ? 
    new XmlHttpHandler(new XMLHttpRequest()) : 
    new HttpHandler(require('http')); 

のWebPACKの設定は、このようなものです：私はこのようなのNode.jsからモジュールを使用しようと

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = [ 
    { 
     target: 'web', 
     entry: './test.js', 
     output: { 
      filename: 'test.js', 
      path: path.resolve(__dirname, 'dist'), 
      libraryTarget: 'umd', 
      library: 'test' 
     }, 
     devServer: { 
      contentBase: path.join(__dirname, "sandbox") 
     } 
    }, 
    { 
     target: 'node', 
     entry: './test.js', 
     output: { 
      filename: 'test.node.js', 
      path: path.resolve(__dirname, 'dist'), 
      libraryTarget: 'commonjs2' 
     } 
    } 
]; 

場合は、それが動作します：

const test = require('./dist/test.node'); 
test().call('http://localhost:8080', (status) => { console.log(status); }); 

私はちょうど使用したいですブラウザとノードの両方のバージョンで1つです。 ブラウザとノードの両方で動作する単一のjsをビルドする方法はありますか？ 今はちょっときれいだと思う。 ;-)

おかげで、 マッシモ

Answer 1

私はちょうどあなたの状況を描いていると私はあなたがProvidePluginを使用して、あなたの目的を達成することができると思います。両方のモジュール（XHRまたはhttp）に同じ変数（API？）を定義すると、アプリケーションは定義されたその変数を使用します。 条件もあり、両方のモジュールは同じ機能を公開する必要があります