वेबपैक कोड को बाहर से कॉल करना (HTML स्क्रिप्ट टैग)

Question

मान लीजिए कि मेरे पास इस तरह की कक्षा है (टाइपस्क्रिप्ट में लिखित) और मैं इसे वेबपैक के साथ बंडल करता हूं bundle.js।

export class EntryPoint {
    static run() {
        ...
    }
}

अपने index.html में मैं बंडल शामिल करूंगा, लेकिन फिर मैं उस स्थिर पद्धति को भी कॉल करना चाहूंगा।

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

हालांकि, EntryPointइस मामले में अपरिभाषित है। फिर मैं दूसरी स्क्रिप्ट से बंडल किए गए जावास्क्रिप्ट को कैसे कहूंगा?

जोड़ा गया : वेबपैक कॉन्फ़िगर फ़ाइल ।

Comments

कृपया अपना वेबपैक कॉन्फ़िगरेशन जोड़ें। मुझे विश्वास है कि var EntryPoint = require('EntryPoint')आपकी onloadपद्धति में कुछ रेखा गायब है ।

— मार्टिन विसेटीका

@MartinVseticka मैंने अपना कॉन्फ़िगरेशन जोड़ा है। दरअसल ऐसा कुछ requireजरूरी हो सकता है लेकिन नीचे आयात के साथ भी ऐसा ही है require is not defined। मैं जो करने की कोशिश कर रहा हूं वह सादे जावास्क्रिप्ट से बंडल सामग्री का उपयोग करने के लिए है, क्या मुझे फिर से उपयोग करने के लिए कुछ रूपरेखा की आवश्यकता नहीं होगी require? लेकिन मैं इससे बचने की कोशिश कर रहा हूं। आशा है कि यह समझ में आता है।

— रेवेन

Answer 1

ऐसा लगता है कि आप वेबपैक बंडल को लाइब्रेरी के रूप में उजागर करना चाहते हैं । आप अपने खुद के एक चर के भीतर वैश्विक संदर्भ में अपने पुस्तकालय को उजागर करने के लिए वेबपैक को कॉन्फ़िगर कर सकते हैं, जैसे EntryPoint।

मैं टाइपस्क्रिप्ट नहीं जानता, इसलिए उदाहरण इसके बजाय सादे जावास्क्रिप्ट का उपयोग करता है। लेकिन यहां महत्वपूर्ण टुकड़ा वेबपैक कॉन्फ़िगरेशन फ़ाइल और विशेष रूप से outputअनुभाग है:

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

index.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

फिर आप अपने पुस्तकालय के तरीकों का उपयोग करने में सक्षम होंगे जैसे आप उम्मीद करते हैं:

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

वास्तविक कोड के साथ जिस्ट की जांच करें ।

Comments

हमारे पास कई प्रवेश बिंदु हैं, इसलिए आउटपुट अनुभाग में, मैंने इसके बजाय इसे बनाया library: ["GlobalAccess", "[name]"],। तब प्रत्येक संस्करण के लिए सदस्यों के साथ संस्करण को एक वस्तु बना दें: GlobalAccess.EntryPointFoo, GlobalAccess.EntryPointBar, इत्यादि

— जॉन हैटन

इस के लिए काम करता है, nam run buildलेकिन प्रयोग में देव env में काम नहीं करता है webpack-dev-server। मेरा निर्यात किया गया EntryPoint एक खाली वस्तु है। कोई विचार?

— nkint

उस स्थिति के बारे में जहां प्रविष्टि: {पेज 1: ['मॉड्यूल 1. जेएस', 'मॉड्यूल 2. जेएस'], पेज 2: 'मॉड्यूल 3.जेएस'} @ जॉनहॉटन सुझाव तब काम नहीं करता है। मुझे पेज 1.module2 तक पहुंच प्राप्त है, लेकिन पेज 1.module1 को नहीं। लगता है बस आखिरी को ही लेना है।

— शिमस

निम्नलिखित चरणों का पालन किया, कॉन्फ़िगर को बदल दिया, इसे फिर से बनाया, लेकिन अभी भी नहीं मिल रहा है संदर्भ: प्रविष्टि: परिभाषित नहीं किया गया है

— user889030

मैंने इसी तरह के उदाहरण को babel + webpack v3.10.0 में काम करने के लिए index.js को बदलकर export function run() {}प्राप्त किया हैmodule.exports = ...

— dworvos

Answer 2

मैं बिना किसी और webpack.config.jsसंशोधन के इस काम को प्राप्त करने में कामयाब रहा , बस उस importकथन का उपयोग करके, जिसे मैंने अपने मुख्य / index.js फ़ाइल से बुलाया था:

import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;

संदर्भ के लिए, यहां मेरी weback.config.jsफ़ाइल है।

प्रारंभ में मैंने उसी के उपयोग को पूरा करने की कोशिश की require, हालांकि इसने window.EntryPointवास्तविक वर्ग के विपरीत मॉड्यूल आवरण को सौंपा ।

Comments

किसी भी मौका es6 के बिना यह कर? नहीं तो मैं मिलता हूं Uncaught SyntaxError: Unexpected token import। या आपका index.jsभी बंडल है (मैं इसे प्रविष्टि बिंदु के रूप में देखता हूं, लेकिन निश्चित नहीं)?

— रेवेन

हाँ, index.js को भी बंडल किया गया है - यही वह जगह है जहां मैंने आयात स्टेटमेंट को शामिल किया है

— मैट

ठीक है, आप देख रहे हैं, मैं एक ऐसी स्क्रिप्ट का उपयोग करने का प्रयास कर रहा हूं जो बंडल से संबंधित नहीं है। जैसे बंडल एक पुस्तकालय था और मैं इसके तरीकों को बाहर से एक्सेस करने की कोशिश करूंगा। क्या यह संभव है?

— रेवेन

यह समाधान वास्तव में सरल है और समस्या के उत्पन्न होते ही इसके बारे में न सोचने के लिए मुझे स्वयं पर शर्म आती है।

— cav_dan

मैं इस समस्या पर घंटों से अटका हुआ था। बस स्क्रिप्ट को मेरे बंडल में स्थानांतरित करने के लिए जा रहा था, लेकिन इससे एक गुच्छा अधिक समस्याओं का कारण होगा। सरल उत्तर के लिए धन्यवाद !!

— स्टीफन अग्वु

Answer 3

मेरी परिस्थिति में मैं इसे बनाते समय विंडो में फ़ंक्शन लिखकर एक स्क्रिप्ट से बंडल जावास्क्रिप्ट के भीतर से एक फ़ंक्शन को कॉल करने में सक्षम था।

// In the bundled script:
function foo() {
    var modal = document.createElement('div');
}
// Bind to the window
window.foo = foo;
// Then, in the other script where I want to reference the bundled function I just call it as a normal function
<button onClick="window.foo()">Click Me</button>

मैं बाबेल का उपयोग करने में सक्षम नहीं था इसलिए यह मेरे लिए काम कर रहा था।

Comments

यह बहुत साफ समाधान है।

— तेमन शिपाही

Answer 4

मेरे पास एक समान चुनौती थी, मैं एक यात्रा के भीतर कई पृष्ठों के लिए एक बंडल बनाना चाहता था और चाहता था कि प्रत्येक पृष्ठ कोड में अपना प्रवेश बिंदु हो, और प्रत्येक पृष्ठ के लिए एक अलग बंडल के बिना।

यहाँ मेरा दृष्टिकोण है, जो कर्ट विलियम्स के समान है, लेकिन थोड़े अलग कोण से भी, बिना वेबपैक कॉन्फ़िगर को बदले:

JourneyMaster.js

import { getViewData } from './modules/common';
import { VIEW_DATA_API_URL } from './modules/constants';
import { createLandingPage, createAnotherPage } from './modules/components/pageBuilder';

window.landingPageInit = () => {
    getViewData(VIEW_DATA_API_URL).then(viewData => {
        createLandingPage(viewData);
    });
};

window.anotherPageInit = () => {
    getViewData(VIEW_DATA_API_URL).then(viewData => {
        createAnotherPage(viewData);
    });
};

// I appreciate the above could be one liners,
// but readable at a glance is important to me

फिर htmlपेज के अंत में मैं इन तरीकों को कैसे कहता हूं, इसका एक उदाहरण :

<script src="/js/JourneyMaster.js"></script>
<script>window.landingPageInit();</script>

Answer 5

WEBPACK.CONFIG.JS

1. यूएमडी को छोड़ना

module.exports={
            mode:'development',
            entry:'./yourentry.js',
            output:{
            path:path.resolve(__dirname,"dist"),
            filename:'main.js',
            publicPath:'/dist/',
            libraryTarget:'umd', 
            library:'rstate',
            umdNamedDefine: true,
            libraryExport: 'default' 
        }
    }

index.html

<script src="dist/main.js"></script>
<script>
  window.onload = function () {
  rstate()=>{}
</script>

main.js

export default function rstate(){
console.log("i called from html")
}

2.सुख वार

module.exports={
            mode:'development',
            entry:'./yourentry.js',
            output:{
            path:path.resolve(__dirname,"dist"),
            filename:'main.js',
            publicPath:'/dist/',
            libraryTarget:'var', 
            library: 'EntryPoint'
        }
    }

index.html

<script>
  window.onload = function () {
  EntryPoint.rstate()=>{}
</script>

main.js

module.exports={
rstate=function(){
console.log("hi module")
}
}

3. एएमडी को पुस्तकालय के रूप में उपयोग करना, हम उन लोगों के लिए उपयोग करते हैं (जो कामगार बनाना चाहते हैं)

define(['jquery', './aux-lib.js'], function ($) { ..(1).. });

Answer 6

App.ts:

namespace mytypescript.Pages {

        export class Manage {

     public Initialise() {
     $("#btnNewActivity").click(() => {
                    alert("sdc'");
                });
        }
    }
}

mypage.html:

 <input class="button" type="button" id="btnNewActivity" value="Register New Activity" />

 <script type="text/javascript">
    var page = new mytypescript.Pages.Manage();
    page.Initialise();
</script>