Dışarıdan web paketli kodu çağırma (HTML komut dosyası etiketi)

Diyelim ki böyle bir sınıfım var (typcript ile yazılmış) ve onu webpack ile paketlediğim bundle.js.

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

İndex.html dosyama paketi ekleyeceğim, ancak daha sonra bu statik yöntemi de çağırmak istiyorum.

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

Ancak, EntryPointbu durumda tanımsızdır. O halde paketlenmiş javascript'i başka bir komut dosyasından nasıl çağırırım?

Eklendi : Webpack yapılandırma dosyası .

Görünüşe göre web paketi paketini bir kitaplık olarak göstermek istiyorsunuz . Web paketini, kitaplığınızı kendi değişkeniniz dahilinde küresel bağlamda gösterecek şekilde yapılandırabilirsiniz.EntryPoint .

TypeScript'i bilmiyorum, bu yüzden örnek bunun yerine düz JavaScript kullanıyor. Ancak buradaki önemli parça web paketi yapılandırma dosyası ve özellikle şu outputbölümdür:

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');
  }
};

Ardından, beklediğiniz gibi kitaplık yöntemlerinize erişebileceksiniz:

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

Asıl kod ile özü kontrol edin .

Bu çalışmayı herhangi bir webpack.config.jsdeğişiklik yapmadan , sadece importmain / index.js dosyamdan çağırdığım ifadeyi kullanarak başardım :

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

Referans için, işte benim weback.config.js dosyam.

Başlangıçta aynı şeyi kullanarak requireyapmayı denedim , ancak modül sarmalayıcıyı window.EntryPointgerçek sınıfın aksine atadı .

Benim durumumda, paketlenmiş JavaScript içinden başka bir komut dosyasından bir işlevi, işlevi oluştururken pencereye yazarak çağırabildim.

// 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'i kullanamadım, bu yüzden bu benim için çalıştı.

Benzer bir zorluk yaşadım, bir yolculuktaki birden çok sayfa için bir paket oluşturmak istedim ve her sayfanın koda kendi giriş noktası olmasını ve her sayfa için ayrı bir paket olmadan olmasını istedim.

İşte benim yaklaşımım Kurt Williams'a çok benziyor, ancak biraz farklı bir açıdan, ayrıca web paketi yapılandırmasını değiştirmeden:

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

Sonra htmlsayfanın sonunda bu yöntemleri nasıl adlandırdığıma dair bir örnek :

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

WEBPACK.CONFIG.JS

1. UMD KULLANIMI

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 KULLANIMI

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'yi beğendiğimiz kütüphane olarak kullanmak (lib yapmak isteyenler için)

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

App.ts:

namespace mytypescript.Pages {

        export class Manage {

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

sayfam.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>