2017-05-24 20 views
5

Kısa sürüm olanWebPack örtülü satıcı/IE11 tezahür parçalar - Söz tanımsız

Ben IE11 benim uygulamayı çalıştırmak, bir hata manifest.js dosyası içinden Promise is undefined söyleyerek olsun.

Nasıl bu önce tezahür yürütülür çalıştığını babel-polyfill eklemek veya benzeri tür do?

Ben ayrı paket halinde üçüncü parti (npm paketi) komut dosyalarını ayrılarak amacıyla benim webpack config CommonsChunkPlugin eklemek çalışıyorum

Uzun sürümü. Webpack 2 belgelerine göre, modern tarayıcılarda iyi çalışan "combined implicit common vendor chunks and manifest file" ayarını kurdum.

Parçaların dizin dosyamda doğru sırada yer aldığından emin olmak için bir işlev yazdım (aşağıya bakın).

benim iki Açık giriş noktalarında Biraz arka plan:

  • legacy_libs - script-loader ile genel ad yerleştirilir Yaşlı kütüphaneler. Benim ana uygulama giriş noktası

diğer iki (satıcı ve apaçık) örtük ve CommonsChunkPlugin ile oluşturulan vardır - Zamanında

  • ana içinde bu çıkartmaya umuyoruz.

    Bunu IE11 ile çalıştırdığımda hata alıyorum: Promise is undefined. Bunun nedeni, webpack manifest'inin kendisini new Promise() olarak çağırmasıdır.

    Ana giriş noktasında import 'babel-polyfill'; var. Satıcı & manifest chunking'i eklemeden önce, bu IE'nin Promises eksikliğinden kurtulmamı sağladı. Ama şimdi ilk önce manifest.js yüklüyordum, doğru sıralamaya nasıl ekleyeceğimi bilemiyorum.

    Benim yapılandırma şöyle görünür: Aynı sorunu koştum

    module.exports = { 
        entry: { 
        legacy_libs: './app/libs.js', 
        main: './app/main.js' 
        }, 
        ... 
        plugins: [ 
        // Extract third party libraries into a separate vendor bundle. 
        // Also extract webpack manifest into its own bundle (to prevent vendor hash changing when app source changes) 
        new webpack.optimize.CommonsChunkPlugin({ 
         name: 'vendor', 
         minChunks: function (module) { 
         return module.context && module.context.indexOf('node_modules') !== -1; 
         } 
        }), 
        new webpack.optimize.CommonsChunkPlugin({ 
         name: 'manifest' 
        }), 
    
        // Generate index.html file. 
        // Include script bundles in the right order based on chunk name prefixes. 
        new HtmlWebpackPlugin({ 
         template: 'app/index.ejs', 
         chunksSortMode: function (a, b) { 
         const chunkOrder = ['manifest', 'vendor', 'legacy_libs', 'main']; 
         const aChunk = chunkOrder.findIndex(chunk => a.names[0].startsWith(chunk)); 
         const bChunk = chunkOrder.findIndex(chunk => b.names[0].startsWith(chunk)); 
         const aValue = (aChunk > -1) ? aChunk : chunkOrder.length; 
         const bValue = (bChunk > -1) ? bChunk : chunkOrder.length; 
         return aValue - bValue; 
         } 
        }) 
    } 
    
  • cevap

    2

    Bu WebPack 2.6.0 ile tanıtılan bir sorun gibi görünüyor, bir hata zaten verilir: https://github.com/webpack/webpack/issues/4916

    Yani ya hata düzeltilinceye kadar bekleyin ya da 2.5.1'e geri dönün!

    +0

    @Sheeni Teşekkürler, söylediğiniz gibi, Webpack 2.5.1 'e geri dönmek sorunu çözüyor ve ayrıca Github ile ilgili bir sorun, bir hata düzeltmesine dikkat edeceğim. –

    0

    . Benim yapılandırm sana benziyor (satıcı & bildirisi). Çözdüğüm yol, manifestimin giriş noktasında babel-polyfill eklemekti. Sizin entry gibi görünmelidir: Bu manifesto dosyasında kullanılabilir böylece

    entry: { 
        legacy_libs: './app/libs.js', 
        main: './app/main.js', 
        manifest: 'babel-polyfill' 
    } 
    

    Bu

    polyfill yükleyecektir.

    ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (manifest)

    böyle görünecek şekilde giriş noktaları ve CommonsChunkPlugin değiştirerek bunu Sabit:

    DÜZENLEME: oluştururken (o dev-sunucu üzerinde iyi çalışır rağmen) bu başka bir hata döndürdü kullanma:

    entry: { 
        legacy_libs: './app/libs.js', 
        main: './app/main.js', 
        'babel-polyfill': 'babel-polyfill' 
    }, 
    ... 
    plugins: [ 
        ... 
        new webpack.optimize.CommonsChunkPlugin({ 
         name: 'manifest', 
         chunks: 'babel-polyfill' 
        }), 
    ] 
    
    +2

    Cevabınız için teşekkürler @Fleezey - bu yine de benim için işe yaramıyor. Bir babel-polyfill.js dosyası oluşturmasına neden oluyor (webpackJsonp ([3] .... 'ile başlıyor.) Eğer manifest.js'den önce bu dosyayı eklediysem, o zaman webpackJsonp' ile ilgili bir hata alıyorum. Ben manifestasyondan sonra içerdiğim halde, ben polifilyon olmayan Promise'i kullanarak manifestin orijinal problemini aldım. –