構建瀏覽器和節點與webpack

我正在寫我的第一個模塊。基本上，瀏覽器和node.js版本的代碼完全相同。唯一的區別是瀏覽器使用XmlHttpRequest，而node.js使用http模塊。構建瀏覽器和節點與webpack

這裏是一個類似於我想要做的例子。

// 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配置是這樣的：

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' 
     } 
    } 
];

如果我嘗試使用該模塊從這樣的node.js，它的工作原理：

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

我想只使用一個js適用於瀏覽器和節點版本。有沒有辦法用webpack來構建一個適用於瀏覽器和節點的單個js？我希望現在有點清楚。 ;-)

感謝，馬西莫

來源

2017-05-29 Massimo Necchi

已解決。簡單地說，我需要在webpack.config.js中設置'libraryTarget：「umd」'，並用** externals ** config排除http和https模塊。 –

嗨馬西莫，歡迎來到SO，很好的問題。隨意回答你自己的問題，到達這裏的人可能會比評論中更快地看到它:) – Ben

我只是想象你的情況，我想你可以使用ProvidePlugin實現你的目標。您將爲這兩個模塊（XHR或http）定義相同的變量（API？），並且您的應用程序將使用定義的變量。還有一個條件，你的模塊必須公開相同的功能

來源

2017-05-29 12:50:04 Ematipico

構建瀏覽器和節點與webpack

回答

相關問題