Web paketini kullanarak bir işlevi dışa aktarma ve gruplama ve html komut dosyası etiketi içinde çağırma

Dec 15 2020

Çok basit bir şey deniyordum - webpack kullanarak bir işlevi dışa aktarın ve paketleyin (ve babel çevirin) ve sonra onu html sayfamın komut dosyası etiketinde çağırın.

sample.js - web paketi kullanılarak paketlenir

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

Webpack yapılandırması (sürüm = 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
    }

Ben olsa ekleyerek kadar kolay libraryve libraryTargetwebpack yapılandırma için hedefler ve sonra ben olarak benim işlevi çağırmak mümkün olmalıdır MyLibrary.sampleFunctionExported1().

Ama bunu MyLibrarybenim tarayıcı konsoluna, aşağıda gibi görüntüler MyLibrary.sampleFunctionExported1()dönüş ... is not a functionhatası

Bu soruların / cevapların çoğunda önerileri takip ettim: cevap 1 , cevap 2 , cevap 3 ve diğer çeşitli blog gönderileri, ancak benim için hiç çalışmıyor.

Bu kadar çok zaman harcadıktan sonra, birinin neyin yanlış olduğunu anlamama yardım edebileceğini umarak onu buraya gönderiyorum.

Düzenleme 1: Web paketi paketlemesinden sonra oluşturulan dosya: /public/js/sample.js

Not - entry2.jsDosyayı boş bir dosya olduğu için görmezden gelin, yapılandırmamı göstermek için ekledim ve birden fazla giriş noktasına sahip olduğum için şu anda karşılaştığım bu soruna neden olup olamayacağından emin olmadığım için.

Yanıtlar

1 Jacob Dec 15 2020 at 03:21

Dışa aktarma şekliniz nedeniyle:

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

... MyLibrarydeğişkeniniz şu şekle sahip olacak:

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

Bunun yerine şekle sahip olmasını istiyorsanız:

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

... varsayılan bir dışa aktarma yerine adlandırılmış bir dışa aktarma yapmanız gerekir:

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