Dinamik System.import?

Question

Yazdığım systemjs + Babel kullanan bazı ES6 kodlarını yüklemeye çalışıyorum.

Kodun çoğunu taşıyan herhangi bir sorunla karşılaşmadım.

function load(src) { 
    System.import(src).then(function() {}); 
} 

src da bağımlılıklar (statik ithalat) sahip olabilen bir dış ES6 modüldür:

Ancak, dinamik olarak böyle bir ES6 modülü yüklemek için gereken bazı kod var.

Bu kodu Webpack'e nasıl yükleyebilirim? Gereksinim ifadesini kullanmaya çalışırsam, Webpack belgelerine göre normal görünen bir UYARI alıyorum.

Answer 1

Web pakette "dinamik yükleme" gibi bir şeyiniz yok (çünkü paketleyicinin tüm modül bağımlılıklarına gitmesi gerekiyor). Neyi başarmak istediğinize en yakın şey (ve web pakette bunu yapmanın doğru yolu) require.ensure - see documentation'u kullanmak olacaktır. olacağını WebPack içine SystemJS kodu dönüm

Tek yönlü:

function load(moduleName) { 
    switch (moduleName) { 
     case 'foo': 
      require.ensure([], require) => { 
       const foo = require('./foo.js'); 
       // do something with it 
      } 
      break; 
     case 'bar': 
      require.ensure([], require) => { 
       const bar = require('./bar.js'); 
       // do something with it 
      } 
      break; 
    } 
} 

Bir yük fonksiyonu enkapsüle yapmanızı öneriyorum her require.ensure (farklı şekilde geri aramalar yönetmek isteyebilirsiniz).

Bir örneği Bu işlemek için little-loader gibi bir kütüphane kullanmayı deneyebilirsiniz here

Answer 2

kontrol edebilirsiniz. Örnek:

var load = require('little-loader'); 

load('<src>', function(err) { 
    // loaded now, do something 
}); 

Answer 3

WebPack 1 System.import desteklemez, sen WebPack en require.ensure dinamik modülleri yüklemek için kullanarak bu geçici bir çözüm mümkün olabilir. Bu yaklaşımın ayrıntıları burada bulunabilir: https://webpack.github.io/docs/code-splitting.html#es6-modules

yapmak istediğiniz tam olarak ne bağlı olarak, yanı WebPack en context özelliği kullanmak gerekebilir daha fazla bilgi için buraya bakınız https://webpack.github.io/docs/context.html

WebPack 2 Bu sorunları gidermek gerekir ES6 & System.import doğrudan destekleyecek gibi.

Answer 4

Önceki cevaplar doğruydu, ancak şimdi webpack 2.2 + babel'de (yazarken, v2.2.0-rc.3 son versiyonudur) bunu yapabiliriz. Kendimi test etmedim, ama beni buraya getiren bir araştırma yaptı.

webpack belgelerinden bunu okuyun:

function route(path, query) { 
 
    return import("./routes/" + path + "/route") 
 
    .then(route => new route.Route(query)); 
 
} 
 
// This creates a separate chunk for each possible route

Eğer Syntax Dynamic Import plugin yüklemeniz gerekir dikkat edin:

Sadece o bölümünün altında Code Splitting with es2015 bu örnekle Dynamic Expressions olduğunu dokümanın da belirttiği gibi.