Làm thế nào để yêu cầu JavaScript bằng cách sử dụng webpack từ một thư mục động

Question

Tôi có một số JavaScript cũ ES5 cũ mà tôi cần phải kéo vào ứng dụng của tôi đang sử dụng webpack như một gói. Vấn đề là vị trí của các tệp này nằm trong thư mục có đường dẫn động. Dường như webpack không hoạt động tốt với các biểu thức trong số require và require.context không cho phép chúng.

Đối với các thư mục con đường được biết đến để yêu cầu tất cả các tập tin trong một thư mục và thư mục con của nó, phương pháp này hoạt động tốt :

let domainRequires = require.context('./app/domain', true, /\.js$/); domainRequires.keys().forEach(domainRequires);

Vì tôi không thể sử dụng một biểu thức trong require.context, tôi đã cố gắng chỉ sử dụng đơn giản require và nó được KHÔNG làm việc:

require('../../path/to/code/my-library-' + versionNumber + '/domain/clazz.js');

sử dụng đường dẫn tương đối đầy đủ.

Tôi cũng đã cố gắng sử dụng require.context nhưng tăng cường phần regex để có được nó làm việc và đã không có may mắn:

require.context('../../path/to/code', true, /^my-library-.*\/domain\/.*\.js$/);

Bất kỳ suy nghĩ, đề nghị, hoặc các giải pháp sẽ được hoan nghênh. Nếu tôi cần phải sử dụng một cái gì đó bên thứ 3 với webpack, đó là tốt quá.

Answer 1

Tôi đã tìm ra điều này. Bằng cách sử dụng webpack resolve.alias, tôi có thể thêm:

resolve: { 
    alias: { 
    common: path.resolve(__dirname, '../../path/to/code/my-library-' + versionNumber + '/domain') 
    } 
} 

trong webpack.config.

Sau đó, trong mã của tôi, tôi có thể yêu cầu tất cả các tập tin dưới /domain qua:

var commonRequires = require.context('common', true, /\.js$/); 
commonRequires.keys().forEach(commonRequires); 

Tương tự như vậy, tôi có thể nhận được một tập tin duy nhất thông qua:

require('common/clazz.js'); // ../../path/to/code/my-library-1.0.0/domain/clazz.js 

FWIW, để có được versionNumber tôi đã sử dụng mô-đun fs của nút được sử dụng để đọc từ tệp json, được sử dụng JSON.parse(file) và sau đó truy xuất phiên bản ở đầu webpack.config

Answer 2

Từ Webpack 3.9 (Tôi nghĩ) không cần thiết là commonRequires. Tôi chạy này trong webpack.config.js:

resolve: { 
    alias: { 
    tmpDir: path.resolve(__dirname, '/tmp') 
    } 
} 

Và sau đó tôi nạp mô-đun tùy chỉnh của tôi như:

const dynModule = require('tmpDir/dyn_module.js'); 

Không chắc nếu tôi bỏ lỡ một cái gì đó từ yêu cầu của bạn nhưng commonRequires là không cần thiết đối với tôi và Webpack xây dựng này chỉ tốt (và nó hoạt động).