वेबपैक का उपयोग करके किसी फ़ंक्शन को निर्यात करना और बंडल करना और उसे HTML स्क्रिप्ट टैग के अंदर कॉल करना

Dec 15 2020

मैं वेबपैक का उपयोग करके एक बहुत ही सरल - निर्यात और बंडल (और बैबल ट्रांसप्लिंग) एक फ़ंक्शन की कोशिश कर रहा हूं और फिर इसे मेरे HTML पृष्ठ के स्क्रिप्ट टैग में कॉल करता हूं।

sample.js - जिसे वेबपैक का उपयोग करके बंडल किया गया है

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

वेबपैक कॉन्फ़िगरेशन (संस्करण = 4.44.1)

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

हालांकि, यह वेबपैक कॉन्फिग में लक्ष्य libraryऔर libraryTargetलक्ष्य जोड़ना जितना आसान था और फिर मुझे अपने फ़ंक्शन को कॉल करने में सक्षम होना चाहिए MyLibrary.sampleFunctionExported1()

लेकिन जब मैं MyLibraryअपने ब्राउज़र कंसोल में करता हूं, तो यह नीचे के रूप में प्रदर्शित होता है और त्रुटि MyLibrary.sampleFunctionExported1()वापस करता है... is not a function

मैंने इनमें से कई प्रश्नों / उत्तरों में सुझावों का पालन किया है: उत्तर 1 , उत्तर 2 , उत्तर 3 और विभिन्न अन्य ब्लॉग पोस्ट, लेकिन यह मेरे लिए बिल्कुल भी काम नहीं करता है।

इसलिए इतना समय बिताने के बाद, मैं इसे यहाँ पोस्ट कर रहा हूँ उम्मीद करता हूँ कि कोई मुझे समझने में मदद कर सकता है कि क्या गलत है।

संपादित करें 1: यहाँ वेबपैक बंडलिंग के बाद उत्पन्न ithe फ़ाइल है: /public/js/sample.js

PS - entry2.jsफ़ाइल को अनदेखा करें क्योंकि यह एक खाली फ़ाइल है, मैंने इसे केवल अपना कॉन्फिगर दिखाने के लिए जोड़ा है और क्योंकि मुझे यकीन नहीं है कि अगर कई एंट्री पॉइंट्स इस समस्या का कारण बन सकते हैं जिसका मैं वर्तमान में सामना कर रहा हूं।

जवाब

1 Jacob Dec 15 2020 at 03:21

क्योंकि आप कैसे निर्यात कर रहे हैं:

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

... आपके MyLibraryचर का आकार होने जा रहा है:

{
  default: function() { ... }
}

यदि आप इसके बजाय यह आकार चाहते हैं:

{
  sampleFunctionExported1: function() { ... }
}

... आपको डिफ़ॉल्ट निर्यात के बजाय नामित निर्यात करने की आवश्यकता है:

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}