Memanggil kode webpacked dari luar (tag skrip HTML)

Misalkan saya memiliki kelas seperti ini (ditulis dalam naskah) dan saya bundel dengan webpack bundle.js.

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

Dalam index.html saya, saya akan menyertakan bundel, tetapi kemudian saya juga ingin memanggil metode statis itu.

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

Namun, hal EntryPointini tidak terdefinisi dalam kasus ini. Bagaimana saya memanggil javascript yang dibundel dari skrip lain?

Ditambahkan : file konfigurasi Webpack .

Tampaknya Anda ingin mengekspos bundel webpack sebagai pustaka . Anda dapat mengonfigurasi webpack untuk mengekspos pustaka Anda dalam konteks global di dalam variabel Anda sendiri, seperti EntryPoint.

Saya tidak tahu TypeScript jadi contohnya menggunakan JavaScript biasa. Tetapi yang penting di sini adalah file konfigurasi webpack, dan khususnya outputbagian:

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

Maka Anda akan dapat mengakses metode perpustakaan Anda seperti yang Anda harapkan:

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

Periksa intinya dengan kode aktual.

Saya berhasil menjalankan ini tanpa webpack.config.jsmodifikasi lebih lanjut , hanya dengan menggunakan importpernyataan yang saya panggil dari file utama / index.js saya:

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

Untuk referensi, ini weback.config.jsfile saya .

Awalnya saya mencoba menyelesaikan menggunakan yang sama require, namun ia ditugaskan pembungkus modul window.EntryPointsebagai lawan dari kelas yang sebenarnya.

Dalam keadaan saya, saya bisa memanggil fungsi dari dalam JavaScript yang dibundel dari skrip lain dengan menulis fungsi ke jendela saat membuatnya.

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

Saya tidak dapat menggunakan Babel jadi ini bekerja untuk saya.

Saya memiliki tantangan serupa, saya ingin membuat bundel untuk beberapa halaman dalam perjalanan dan ingin setiap halaman memiliki titik masuknya sendiri ke dalam kode, dan tanpa bundel terpisah untuk setiap halaman.

Inilah pendekatan saya, yang sangat mirip dengan Kurt Williams tetapi dari sudut yang sedikit berbeda, juga tanpa mengubah konfigurasi 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

Lalu contoh bagaimana saya memanggil metode ini di akhir htmlhalaman:

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

WEBPACK.CONFIG.JS

1.MENGGUNAKAN 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. MENGGUNAKAN 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.Menggunakan AMD sebagai pustaka yang kami gunakan seperti (untuk mereka yang ingin membuat 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>