Pertanyaan Memanggil kode webpacked dari luar (tag skrip HTML)


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

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

Di index.html 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, itu EntryPoint tidak terdefinisi dalam kasus ini. Bagaimana saya akan memanggil javascript yang dibundel dari skrip lain?

Ditambahkan: File konfigurasi webpack.


76
2017-12-18 14:07


asal


Jawaban:


Tampaknya Anda ingin mengekspos bundel webpack sebagai Perpustakaan. Anda dapat mengkonfigurasi webpack untuk mengekspos perpustakaan Anda dalam konteks global dalam variabel Anda sendiri, seperti EntryPoint.

Saya tidak tahu TypeScript jadi contohnya menggunakan plain JavaScript sebagai gantinya. Tetapi bagian penting di sini adalah file konfigurasi webpack, dan khususnya output bagian:

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>

Periksalah inti dengan kode yang sebenarnya.


93
2017-12-18 17:53



Saya berhasil mendapatkan ini bekerja tanpa lebih jauh webpack.config.js modifikasi, dengan hanya menggunakan import pernyataan yang saya panggil dari file utama / index.js saya:

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

enter image description here

Untuk referensi, inilah saya weback.config.js mengajukan.

Awalnya saya mencoba melakukan hal yang sama requireNamun, ia menetapkan pembungkus modul untuk window.EntryPoint dibandingkan dengan kelas yang sebenarnya.


33
2017-12-18 15:05



Dalam keadaan saya, saya bisa memanggil fungsi dari dalam paket JavaScript 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.


5
2017-09-29 16:55



Aplikasi:

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>

-4
2018-05-29 22:48