Разделение кода динамическими модулями?

Question

Я использую функцию разделения кода Webpack в React. Я создаю приложение, в котором пользователь выберет опцию, и соответствующий компонент React отобразит. Однако я обнаружил, что использование CommonJs require.ensure работает только с жестко закодированными строками. Когда я использую переменные, кажется, что он работает, компоненты выключаются. Но когда я смотрю на вкладку в сети, я вижу, что он не разбивает код - он не загружает новые пакеты. Где, когда я жестко программирую, каждый раз возникает вызов для нового пакета.

Вот что работает:

executeDynamic(component){ 
    var that = this; 
    switch(component){ 
     case 'SolidButton': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/SolidButton/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     case 'ThreeDButton': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/ThreeDButton/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     case 'NoPreview': 
      require.ensure([], function(require){ 
       DynamicModule = require(`./elements/NoPreview/index.js`); 
       that.forceUpdate(); 
      }); 
      break; 
     default: 
      break; 
    }  
} 

Вот что я хочу работать:

executeDynamic(component){ 
    var that = this; 
    require.ensure([], function(require) { 
     DynamicModule = require(`./elements/${component}/index.js`); 
     that.forceUpdate(); 
    }); 
} 

Answer 1

я, наконец, получил его !! Я переместил динамический запрос в свой собственный файл, так что ниже мой вызов этого файла из моего реагирующего компонента, а затем содержимое файла. Для этого вам необходимо установить пакет bundle-loader.

Так вот я делаю звонок, передавая в this вместе с именем компонента, который я хочу загрузить.

loadLiveCode(that, component) { 
    req(component, function(result) { 
     DynamicModule = result; 
     that.forceUpdate(); 
    }); 
} 

И файл dynamicRequire.js, который держит наш динамический вызов требует, использующую пачке погрузчик:

module.exports = function loadAsync(expr, callback) { 
    var bundledResult = require("bundle!./elements/" + expr + "/index.js"); 
    bundledResult(function(result) { 
    callback(result); 
    }); 
};