การเรียกโค้ด webpacked จากภายนอก (แท็กสคริปต์ HTML)

สมมติว่าฉันมีคลาสเช่นนี้ (เขียนด้วย typescript) และฉันรวมกับ webpack ไว้ในbundle.jsไฟล์.

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

ใน index.html ของฉันฉันจะรวมบันเดิลไว้ แต่ฉันก็อยากจะเรียกว่าวิธีการคงที่

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

อย่างไรก็ตามEntryPointไม่ได้กำหนดไว้ในกรณีนี้ ฉันจะเรียกจาวาสคริปต์ที่รวมมาจากสคริปต์อื่นได้อย่างไร

เพิ่ม : ไฟล์กำหนดค่าWebpack

ดูเหมือนว่าคุณต้องการที่จะเปิดเผยกำ webpack เป็นห้องสมุด คุณสามารถกำหนดค่า webpack ให้แสดงไลบรารีของคุณในบริบทส่วนกลางภายในตัวแปรของคุณเองเช่นEntryPoint.

ฉันไม่รู้จัก TypeScript ดังนั้นตัวอย่างจึงใช้ JavaScript ธรรมดาแทน แต่ส่วนที่สำคัญคือไฟล์กำหนดค่า webpack และโดยเฉพาะ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>

ตรวจสอบส่วนสำคัญด้วยรหัสจริง

ฉันจัดการเพื่อให้มันใช้งานได้โดยไม่ต้องwebpack.config.jsแก้ไขเพิ่มเติมโดยใช้importคำสั่งที่ฉันเรียกจากไฟล์ main / index.js ของฉัน:

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

สำหรับการอ้างอิงนี่คือweback.config.jsไฟล์ของฉัน

ในตอนแรกฉันพยายามทำสิ่งเดียวกันโดยใช้requireแต่มันกำหนดให้โมดูลห่อหุ้มwindow.EntryPointซึ่งตรงข้ามกับคลาสจริง

ในสถานการณ์ของฉันฉันสามารถเรียกใช้ฟังก์ชันจากภายใน JavaScript ที่รวมมาจากสคริปต์อื่นได้โดยเขียนฟังก์ชันลงในหน้าต่างเมื่อสร้าง

// 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>

ฉันไม่สามารถใช้ Babel ได้ดังนั้นสิ่งนี้จึงใช้ได้กับฉัน

ฉันมีความท้าทายที่คล้ายกันฉันต้องการสร้างชุดสำหรับหลาย ๆ หน้าภายในการเดินทางและต้องการให้แต่ละหน้ามีจุดเข้าสู่โค้ดเป็นของตัวเองและไม่มีกลุ่มแยกต่างหากสำหรับแต่ละหน้า

นี่คือแนวทางของฉันซึ่งคล้ายกับ Kurt Williams มาก แต่จากมุมที่แตกต่างกันเล็กน้อยโดยไม่ต้องเปลี่ยนการกำหนดค่า webpack:

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>

WEBPACK.CONFIG.JS

1. การใช้ UMD

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. การใช้งาน VAR

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. การใช้ AMD เป็นไลบรารีที่เราใช้เช่น (สำหรับผู้ที่ต้องการสร้าง lib)

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

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>