Làm cách nào để ngăn khoảnh khắc tải địa phương bằng webpack?

Có cách nào bạn có thể dừng moment.jstải tất cả các ngôn ngữ (tôi chỉ cần tiếng Anh) khi bạn đang sử dụng webpack không? Tôi đang xem nguồn và dường như nếu hasModuleđược xác định, đó là cho webpack, thì nó luôn cố gắng đến require()mọi miền. Tôi khá chắc chắn rằng điều này cần một yêu cầu kéo để sửa chữa. Nhưng có cách nào chúng ta có thể khắc phục điều này với cấu hình webpack không?

Đây là cấu hình webpack của tôi để tải Momentjs:

resolve: {
            alias: {
                moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
            },
        },

Sau đó, bất cứ nơi nào tôi cần nó, tôi chỉ cần làm require('moment'). Điều này hoạt động nhưng nó thêm khoảng 250 kB các tệp ngôn ngữ không cần thiết vào gói của tôi. Ngoài ra, tôi đang sử dụng phiên bản bower của Momentjs và gulp.

Ngoài ra, nếu điều này không thể được sửa bởi cấu hình webpack ở đây là một liên kết đến chức năng nơi nó tải các địa phương . Tôi đã thử thêm && module.exports.loadLocalesvào ifcâu lệnh nhưng tôi đoán webpack không thực sự hoạt động theo cách mà nó sẽ hoạt động. Nó chỉ requirelà không có vấn đề gì. Tôi nghĩ rằng nó sử dụng một regex ngay bây giờ vì vậy tôi thực sự không biết làm thế nào bạn thậm chí sẽ sửa chữa nó.

Mã require('./locale/' + name)có thể sử dụng mọi tập tin trong localethư mục. Vì vậy, gói web bao gồm mọi tệp dưới dạng mô-đun trong gói của bạn. Nó không thể biết bạn đang sử dụng ngôn ngữ nào.

Có hai plugin hữu ích để cung cấp cho webpack thêm thông tin về mô-đun nào sẽ được bao gồm trong gói của bạn: ContextReplacementPluginvà IgnorePlugin.

require('./locale/' + name)được gọi là một bối cảnh (một yêu cầu có chứa một biểu thức). webpack chứa một số thông tin từ đoạn mã này: Một thư mục và một biểu thức chính quy. Đây : directory = ".../moment/locale" regular expression = /^.*$/. Vì vậy, theo mặc định, tất cả các tập tin trong localethư mục được bao gồm.

Các ContextReplacementPluginphép để ghi đè lên thông tin suy ra tức là cung cấp một biểu thức chính quy mới (chọn ngôn ngữ bạn muốn bao gồm).

Một cách tiếp cận khác là bỏ qua các yêu cầu với IgnorePlugin.

Đây là một ví dụ:

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

Trong dự án của chúng tôi, tôi bao gồm khoảnh khắc như thế này: import moment from 'moment/src/moment';và điều đó dường như thực hiện mánh khóe. Việc sử dụng thời điểm của chúng tôi rất đơn giản, vì vậy tôi không chắc sẽ có bất kỳ mâu thuẫn nào với SDK hay không. Tôi nghĩ điều này hoạt động vì WebPack không biết cách tìm các tệp miền địa phương một cách tĩnh, do đó bạn nhận được cảnh báo (rất dễ để ẩn bằng cách thêm một thư mục trống tại moment/src/lib/locale/locale) nhưng không có ngôn ngữ nào bao gồm.

Các mô-đun thích hợp momentthư viện sẽ đưa ra phiên bản 3 tại một số điểm nên hiện nay như tôi đang sử dụng góc-cli mà không cần --ejecttôi chỉ kết thúc của việc sử dụng https://github.com/ksloan/moment-mini nhưimport * as moment from 'moment-mini';

Dựa trên câu trả lời của Adam McCrmick, bạn đã gần gũi, thay đổi bí danh của bạn thành:

resolve: {
    alias: {
        moment: 'moment/src/moment'
    },
},

Với webpack2và các phiên bản gần đây của khoảnh khắc bạn có thể làm:

import {fn as moment} from 'moment'

Và sau đó trong webpack.config.jsbạn làm:

resolve: {
    packageMains: ['jsnext:main', 'main']
}