বাইরে থেকে ওয়েবপ্যাকড কোড কল করা (এইচটিএমএল স্ক্রিপ্ট ট্যাগ)

Question

মনে করুন যে আমার মতো ক্লাস রয়েছে (টাইপ স্ক্রিপ্টে লিখিত) এবং আমি এটি ওয়েবপ্যাক দিয়ে বান্ডিল করেছি bundle.js।

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

আমার ইনডেক্স। Html এ আমি বান্ডিলটি অন্তর্ভুক্ত করব, তবে তারপরে আমি সেই স্থিতিশীল পদ্ধতিটিও কল করতে চাই।

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

তবে EntryPointএই ক্ষেত্রে এটি অপরিজ্ঞাত। আমি অন্য স্ক্রিপ্ট থেকে বান্ডিল জাভাস্ক্রিপ্ট কল করব কিভাবে?

যুক্ত : ওয়েবপ্যাক কনফিগারেশন ফাইল ।

Comments

দয়া করে আপনার ওয়েবপ্যাক কনফিগারেশন যুক্ত করুন। আমি বিশ্বাস করি যে var EntryPoint = require('EntryPoint')আপনার onloadপদ্ধতিতে লাইনের সাথে থাকা কিছু অনুপস্থিত ।

— মার্টিন ভ্যাসেটিকা

@ মার্টিনভিসেটিকা ​​আমি আমার কনফিগারটি যুক্ত করেছি। প্রকৃতপক্ষে এর মতো কিছু 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ডেভ এনভিভ ব্যবহার করে কাজ করে না webpack-dev-server। আমার রপ্তানি করা এন্ট্রিপয়েন্টটি একটি খালি অবজেক্ট। কোন ধারনা?

— nkint

প্রবেশের পরিস্থিতি সম্পর্কে কী হবে: entry পৃষ্ঠা 1: ['মডিউল 1.js', 'মডিউল 2.js'], পৃষ্ঠা 2: 'মডিউল 3.js'} @ জনহ্যাটনের পরামর্শটি তখন কাজ করে বলে মনে হচ্ছে না। আমি পেজ 1.মডিউল 2 এ অ্যাক্সেস পেয়েছি, তবে পেজ 1.মডিউল 1 এ নেই। মনে হচ্ছে এটি কেবল শেষটিকেই গ্রহণ করবে।

— শেয়ামাস

অনুসরণ করা পদক্ষেপগুলি, কনফিগার পরিবর্তন করা হয়েছে, এটি পুনর্নির্মাণ করেছেন, তবে এখনও শিখছেন রেফারেন্স এরর: এন্ট্রিপয়েন্টটি সংজ্ঞায়িত করা হয়নি

— user889030

আমি index.js পরিবর্তন করে Babel + + webpack v3.10.0 কাজ করার জন্য একটি অনুরূপ উদাহরণ অর্জিত করেছি export function run() {}থেকেmodule.exports = ...

— dworvos

Answer 2

আমি আমার মূল / সূচক.জেএস ফাইল থেকে webpack.config.jsযে importবিবৃতিটি আহ্বান করেছি তা ব্যবহার করে, কোনও পরিবর্তন ছাড়াই এই কাজটি পরিচালনা করতে সক্ষম হয়েছি:

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

রেফারেন্সের জন্য, এখানে আমার weback.config.jsফাইল।

প্রথমদিকে আমি একই ব্যবহার করে requireএটি সম্পাদন করার চেষ্টা করেছি , তবে এটি মডিউলটির মোড়কে window.EntryPointআসল শ্রেণীর বিপরীতে বরাদ্দ করেছে ।

Comments

কোন সুযোগ এস 6 ছাড়া এটি করছেন? নাহলে পাব 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")
}
}

৩. এএমডি লাইব্রেরি হিসাবে আমরা ব্যবহার করি (যারা লাইব করতে চান তাদের জন্য)

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>