Yêu cầu các tệp JS động trên thời gian chạy bằng cách sử dụng webpack

Question

Tôi đang cố gắng chuyển thư viện từ grunt/requirejs thành webpack và tình cờ gặp sự cố, đó có thể là một công cụ ngắt trò chơi cho nỗ lực này.

Thư viện tôi thử cổng có chức năng tải và đánh giá nhiều mô-đun - dựa trên tên tệp mà chúng tôi nhận được từ tệp cấu hình - vào ứng dụng của chúng tôi. Mã trông giống như thế này (cà phê):

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

require ở đây cần phải được gọi khi chạy và hoạt động như đã làm với requireJS. Webpack dường như chỉ quan tâm đến những gì xảy ra trong "quá trình xây dựng".

Đây có phải là điều mà webpack về cơ bản không quan tâm? Nếu vậy, tôi vẫn có thể sử dụng requireJS với nó? Giải pháp tốt để tải nội dung động trong suốt thời gian chạy là gì?

chỉnh sửa: loadModule có thể tải các mô-đun, không có trong thời gian xây dựng của thư viện này. Chúng sẽ được cung cấp bởi ứng dụng, thực hiện thư viện của tôi.

Answer 1

Vì vậy, tôi thấy rằng yêu cầu của tôi có một số tập tin được tải về thời gian chạy, mà chỉ có sẵn trên "cấp ứng dụng thời gian biên dịch "và không phải" trên thư viện-biên dịch-thời gian "là không dễ dàng có thể với webpack.

Tôi sẽ thay đổi cơ chế, để thư viện của tôi không yêu cầu tệp nữa, nhưng cần phải chuyển các mô-đun bắt buộc. Có gì đó nói với tôi, đây sẽ là API tốt hơn.

chỉnh sửa để làm rõ:

Về cơ bản, thay vì:

# 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") 

Tôi làm điều này:

# 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) 

Mã đầu tiên làm việc tại require.js nhưng không phải trong webpack.

Tôi cảm thấy khá sai khi có tệp tải thư viện bên thứ ba trong thời gian chạy.

Answer 2

Có khái niệm có tên context (http://webpack.github.io/docs/context.html), nó cho phép thực hiện yêu cầu động.

Cũng có một khả năng để xác định các điểm mã phân chia: 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)); 
} 

Và sử dụng nó như sau:

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

---

Nhưng nhiều khả năng nó không phải là những gì bạn cần - bạn sẽ có nhiều khối thay vì một gói với tất cả các mô-đun bắt buộc và có khả năng nó sẽ không tối ưu ..

Nó là tốt hơn để xác định mô-đun đòi hỏi ở bạn cấu hình tập tin, và bao gồm nó để xây dựng của bạn:

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

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