Требовать JS файлы динамически во время выполнения с помощью webpack

Я пытаюсь перенести библиотеку из grunt/requirejs в webpack и наткнулся на проблему, которая может быть игровым автоматом для этого начинания.

В библиотеке, в которой я пытаюсь установить порт, есть функция, которая загружает и оценивает несколько модулей - на основе их имен файлов, которые мы получаем из файла конфигурации, - в наше приложение. Код выглядит так (кофе):

loadModules = (arrayOfFilePaths) ->
  new Promise (resolve) ->
    require arrayOfFilePaths, (ms...) ->
      for module in ms
        module ModuleAPI
      resolve()

require здесь нужно вызвать во время выполнения и вести себя так же, как с requireJS. Кажется, что Webpack заботится только о том, что происходит в "процессе сборки".

Это что-то, что веб-пакет принципиально не заботит? Если да, могу ли я использовать requireJS с ним? Что такое хорошее решение для динамического загрузки активов во время выполнения?

edit: loadModule может загружать модули, которых нет на время сборки этой библиотеки. Они будут предоставлены приложением, которое реализует мою библиотеку.

Ответы

Ответ 1

Итак, я обнаружил, что мое требование о том, что некоторые файлы, загруженные во время выполнения, которые доступны только в режиме "время компиляции", а не на "время компиляции библиотеки", невозможно с помощью webpack.

Я изменю механизм, чтобы моя библиотека больше не нуждалась в файлах, но нужно передать необходимые модули. В некотором смысле, это все равно будет лучшим API.

изменить, чтобы уточнить:

В основном, вместо:

# in my library
load = (path_to_file) ->
  (require path_to_file).do_something()

# in my app (using the 'compiled' libary)
cool_library.load("file_that_exists_in_my_app")

Я делаю это:

# in my library
load = (module) ->
  module.do_something()

# in my app (using the 'compiled' libary)
module = require("file_that_exists_in_my_app")
cool_library.load(module)

Первый код работал в require.js, но не в webpack.

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

Ответ 2

Существует концепция с именем context (http://webpack.github.io/docs/context.html), она позволяет делать динамические потребности.

Также есть возможность определить точки разделения кода: http://webpack.github.io/docs/code-splitting.html

function loadInContext(filename) { 
    return new Promise(function(resolve){
        require(['./'+filename], resolve);
    })
}

function loadModules(namesInContext){
    return Promise.all(namesInContext.map(loadInContext));
}

И используйте его, как показано ниже:

loadModules(arrayOfFiles).then(function(){
    modules.forEach(function(module){
        module(moduleAPI);
    })
});

Но, скорее всего, это не то, что вам нужно - у вас будет много кусков вместо одного пакета со всеми необходимыми модулями, и, вероятно, он не будет оптимальным.

Лучше определить модуль, требуемый в вашем файле конфигурации, и включить его в свою сборку:

// modulesConfig.js
module.exports = [
   require(...),
   ....
]

// run.js
require('modulesConfig').forEach(function(module){
    module(moduleAPI);
})