Mengekspor dan memaketkan fungsi menggunakan webpack dan memanggilnya di dalam tag skrip html

Question

Saya telah mencoba sesuatu yang sangat sederhana - ekspor dan bundel (dan babel transpiling) fungsi menggunakan webpack dan kemudian menyebutnya dalam tag script halaman html saya.

sample.js - yang dibundel menggunakan webpack

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

Konfigurasi webpack (versi = 4.44.1)

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

Saya pikir itu semudah menambahkan librarydan libraryTargettarget ke konfigurasi webpack dan kemudian saya harus bisa memanggil fungsi saya sebagai MyLibrary.sampleFunctionExported1().

Tetapi ketika saya melakukannya MyLibrarydi konsol browser saya, itu ditampilkan seperti di bawah ini dan MyLibrary.sampleFunctionExported1()mengembalikan ... is not a functionkesalahan

Saya telah mengikuti saran dalam banyak pertanyaan / jawaban ini: jawaban 1 , jawaban 2 , jawaban 3 dan berbagai posting blog lainnya tetapi tidak berhasil sama sekali untuk saya.

Jadi setelah menghabiskan begitu banyak waktu, saya mempostingnya di sini berharap seseorang dapat membantu saya memahami apa yang salah.

Edit 1: Ini dia file yang dihasilkan setelah bundling webpack: /public/js/sample.js

PS - Abaikan entry2.jsfile karena ini adalah file kosong, saya baru saja menambahkannya untuk menunjukkan konfigurasi saya dan karena saya tidak yakin apakah memiliki beberapa titik masuk dapat menyebabkan masalah yang saya hadapi saat ini.

Answer 1

Karena cara Anda mengekspor:

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

... MyLibraryvariabel Anda akan berbentuk:

{
  default: function() { ... }
}

Jika Anda malah menginginkannya memiliki bentuk:

{
  sampleFunctionExported1: function() { ... }
}

... Anda perlu melakukan ekspor bernama alih-alih ekspor default:

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}