2014-09-14 49 views
19

Hem node.js hem de tarayıcıyla kullanılabilecek bir kütüphanem var. CommonJS kullanıyorum ve web paketi kullanarak web sürümü için yayın yapıyorum. Benim kod şöyle görünür:Webpack/browserify ile paketlenirken kod yolunu nasıl hariç tutabilirim?

// For browsers use XHR adapter 
if (typeof window !== 'undefined') { 
    // This adapter uses browser's XMLHttpRequest 
    require('./adapters/xhr'); 
} 
// For node use HTTP adapter 
else if (typeof process !== 'undefined') { 
    // This adapter uses node's `http` 
    require('./adapters/http'); 
} 

Ben karşılaşmamdır Sorun WebPack çalıştırdığınızda oluşturulan çıktı bunun bağımlılık hepsi birlikte http içermektedir (browserify aynı şeyi olurdu) olmasıdır. Bu, tarayıcı performansı için en uygun olmayan bir BÜYÜK dosya ile sonuçlanır.

Sorum şu: Bir modül paketi çalıştırırken düğüm kodu yolunu nasıl hariç tutabilirim? Bunu, webpack'in externals'ı kullanarak geçici olarak çözdüm ve './adapters/http''u dahil ettiğinde tanımsız olarak döndüm. Bu, diğer geliştiricilerin CommonJS kullanarak kütüphaneme bağlı olduğu kullanım durumunu çözmez. Benzer dışlama yapılandırması kullanmadıkça yapıları aynı sorunla sonuçlanır.

Envify kullanarak baktım, sadece başka bir/daha iyi bir çözüm olup olmadığını merak ediyorum.

Teşekkürler!

cevap

0

Paket bölme için require.ensure kullanabilirsiniz. Örneğin

için
if (typeof window !== 'undefined') { 
    console.log("Loading browser XMLHttpRequest"); 

    require.ensure([], function(require){ 

     // require.ensure creates a bundle split-point 
     require('./adapters/xhr'); 
    }); 
} else if (typeof process !== 'undefined') { 
    console.log("Loading node http"); 

    require.ensure([], function(require){ 

     // require.ensure creates a bundle split-point 
     require('./adapters/http'); 
    }); 
} 

Daha fazla bilgi ve Sen WebPack için IgnorePlugin kullanabilir örnek bir demo kullanım here

21

için bakınız. Eğer bir webpack.config.js dosyası kullanıyorsanız, bu gibi kullanmak:

var webpack = require('webpack') 

var ignore = new webpack.IgnorePlugin(/^(canvas|mongoose|react)$/) 

module.exports = { 
    //other options goes here 
    plugins: [ignore] 
} 

ayrıca itin için process.env.NODE_ENV gibi bazı bayraklar kullanabilir Bu en iyi çalıştı IgnorePlugin

düzenli ifadeli filtresi
1

kontrol etmek Benim için Düğüm olarak

var _process; 

try { 
    _process = eval("process"); // avoid browserify shim 
} catch (e) {} 

var isNode = typeof _process==="object" && _process.toString()==="[object process]"; 

true dönecektir ve sadece tarayıcı dönüş false olacak, ancak kod derleme yaparken browserify onun process şim içermez. Sonuç olarak, tarayıcınızdaki kodunuz daha küçük olacaktır.

Düzenleme: broquire

4

birlikte olmaktan node_modules ve yerli düğüm kütüphaneleri hariç amacıyla yapmanız gerekir: Bu daha temiz işlemek için bir paket yazdı

  1. için target: 'node' ekle senin webpack.config.js. Bu, exclude native node modules (yol, fs vb.) Paketlenecek. Diğer tüm node_modules dışlamak için webpack-node-externals kullanın.

    var nodeExternals = require('webpack-node-externals'); 
    ... 
    module.exports = { 
        ... 
        target: 'node', // in order to ignore built-in modules like path, fs, etc. 
        externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 
        ... 
    }; 
    
    :

Yani sonuç yapılandırma dosyası gibi görünmelidir

İlgili konular