WebPack Yakalanmayan ReferenceError: Ben özel dış maddelerle aşağıdaki kodu eklediğinizde bundle.js

Question

bundle.js  2.83 kB 0 [emitted] main 
bundle.js.map 3.36 kB 0 [emitted] main 

gelen node_modules çıkardıktan sonra tanımlı değil gerektiren, doğrudan bundle.js çıktı dahil edilmesini node_modules kaldırabilirsiniz.

bundle.js  743 kB  0 [emitted] main 
bundle.js.map 864 kB  0 [emitted] main 

Bu, paket boyutunu önemli ölçüde azaltır. Ancak tarayıcıda bir hata mesajı alıyorum:Uncaught ReferenceError: require is not defined. Bu sorunun nasıl düzeltileceğini bilen var mı? Eğer node_modules dahil etmediklerinden

var path = require("path"), 
    fs = require("fs"); 

// return what's in the node modules folder apart from ".bin" 
const nodeModules = fs 
    .readdirSync("./node_modules") 
    .filter(d => d != ".bin"); 

/** 
* Remove non-direct references to modules from bundles 
* 
* @param {any} context 
* @param {any} request 
* @param {any} callback 
* @returns 
*/ 
function ignoreNodeModules(context, request, callback) { 
    // IF someone is importing a module e.g. "import {chatModule} from 
    // "./components/chat" using a relative path, then we're okay with them bringing 
    // in into the bundle 
    if (request[0] == ".") 
    return callback(); 

    // IF someone is doing "import {Subject} from "rxjs/Subject" only want to know 
    // if first part is a node_module 
    const module = request.split("/")[0]; 
    if (nodeModules.indexOf(module) !== -1) { 
    // append "commonjs " - tells webpack to go and grab from node_modules instead 
    // of including in bundle 
    return callback(null, "commonjs " + request); 
    } 

    return callback(); 
} 

module.exports = { 
    entry: "./src/index.tsx", 
    output: { 
    filename: "bundle.js" 
    }, 
    devtool: "source-map", 
    resolve: { 
    extensions: ["", ".ts", ".tsx", ".js"] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts(x?)$/, 
     loader: "ts-loader" 
     } 
    ] 
    }, 
    // Runs our custom function everytime webpack sees a module 
    externals: [ignoreNodeModules] 
} 

Answer 1

Kişisel paket daha küçük olmakla birlikte, bu temel soruna yol açar: kodunuzu hiç koşamam böylece artık, tarayıcıya bağımlılıkları gönderin. Muhtemelen bildiğiniz gibi, tarayıcılar yerel olarak require()'u desteklemez, bu nedenle geçerli ignoreNodeModules işleviniz Webpack'in paketlemeyi atlamasını ve require()'da kalmasını söyler, ancak tarayıcı bunun nasıl işleneceğini bilmez.

Paket boyutunu azaltmak istiyorsanız, Webpack'in code splitting sürümünü kullanmayı düşünün, böylece yalnızca her sayfa/bölüm için gereken bağımlılıkları paketleyebilirsiniz. Alternatif olarak, RequireJS gibi tarayıcı tarafındaki bir require() yükleyici kullanmayı düşünebilirsiniz.

externals'u kullanmak, yalnızca kütüphanenizdeki tüketicilerin kitaplığınızla birlikte paketlemek yerine bağımlılıklarınızı sağlamasını beklediğiniz sunucu tarafı Düğüm kitaplıklarını dağıtmak için gerçekten kullanışlıdır.

documentation about externals hakkındaki yorumlar da konuyla ilgili daha fazla bağlam için okumaya değer.