วิธีการป้องกัน moment.js จากการโหลดสถานที่ด้วย webpack?

มีวิธีใดที่คุณสามารถหยุดไม่ให้moment.jsโหลดโลแคลทั้งหมด (ฉันต้องการภาษาอังกฤษ) เมื่อคุณใช้เว็บแพค? ฉันกำลังดูแหล่งที่มาและดูเหมือนว่าหากhasModuleมีการกำหนดไว้ซึ่งเป็นของ webpack ก็จะพยายามrequire()ทุกสถานที่ ฉันค่อนข้างมั่นใจว่าต้องมีคำขอดึงเพื่อแก้ไข แต่มีวิธีใดบ้างที่เราสามารถแก้ไขได้ด้วยการกำหนดค่า webpack

นี่คือ webpack config ของฉันที่จะโหลดโมเมนต์ js:

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

require('moment')จากนั้นทุกที่ฉันต้องการมันผมก็ทำ ใช้งานได้ แต่กำลังเพิ่มไฟล์ภาษาที่ไม่ต้องการลงในบันเดิลของฉันประมาณ 250 kB นอกจากนี้ฉันกำลังใช้รุ่นชั่วครู่ของซุ้มประตูและอึก

นอกจากนี้หากไม่สามารถแก้ไขได้โดยการกำหนดค่าเว็บแพคนี่เป็นลิงค์ไปยังฟังก์ชั่นที่โหลดโลแคล ฉันพยายามเพิ่ม&& module.exports.loadLocalesไปยังifคำสั่ง แต่ฉันเดา webpack ไม่จริงทำงานในลักษณะที่ว่าจะทำงาน มันก็requires ไม่ว่าสิ่งที่ ฉันคิดว่ามันใช้ regex ตอนนี้ดังนั้นฉันไม่รู้จริงๆว่าคุณจะแก้ไขได้อย่างไร

รหัสrequire('./locale/' + name)สามารถใช้ทุกไฟล์ในlocaledir ดังนั้น webpack จึงรวมทุกไฟล์ไว้เป็นโมดูลในชุดข้อมูลของคุณ ไม่สามารถรู้ได้ว่าคุณใช้ภาษาใด

มีสองปลั๊กอินที่มีประโยชน์เพื่อให้ webpack ข้อมูลเพิ่มเติมเกี่ยวกับโมดูลที่ควรจะรวมอยู่ในชุดของคุณ: และContextReplacementPluginIgnorePlugin

require('./locale/' + name)เรียกว่าบริบท (จำเป็นต้องมีการแสดงออก) webpack infers ข้อมูลบางส่วนจากรหัสชิ้นนี้: ไดเรกทอรีและการแสดงออกปกติ ที่นี่: directory = ".../moment/locale" regular expression = /^.*$/. ดังนั้นโดยค่าเริ่มต้นทุกไฟล์ในlocaleไดเรกทอรีรวม

ContextReplacementPluginช่วยให้การแทนที่ข้อมูลสรุปเช่นให้การแสดงออกปกติใหม่ (ให้เลือกภาษาที่คุณต้องการรวม)

IgnorePluginอีกวิธีหนึ่งคือการละเว้นต้องด้วย

นี่คือตัวอย่าง:

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

ในโครงการของเราฉันมีช่วงเวลาเช่นนี้: import moment from 'moment/src/moment';และนั่นดูเหมือนจะเป็นการหลอกลวง การใช้งานช่วงเวลาของเรานั้นง่ายมากดังนั้นฉันไม่แน่ใจว่าจะมีความไม่สอดคล้องกับ SDK หรือไม่ ฉันคิดว่าวิธีนี้ใช้งานได้เนื่องจาก WebPack ไม่ทราบวิธีการค้นหาไฟล์ภาษาแบบคงที่ดังนั้นคุณจะได้รับคำเตือน (ซึ่งง่ายต่อการซ่อนโดยการเพิ่มโฟลเดอร์ว่างที่moment/src/lib/locale/locale) แต่ไม่มีภาษารวมอยู่ด้วย

momentไลบรารีมอดุลาร์ที่เหมาะสมจะมาพร้อมกับเวอร์ชัน 3ในบางจุดดังนั้นในขณะที่ฉันกำลังใช้ angular-cli โดยที่--ejectฉันเพิ่งจบการใช้https://github.com/ksloan/moment-miniเช่นimport * as moment from 'moment-mini';

ตามคำตอบของ Adam McCrmick คุณสนิทเปลี่ยนนามแฝงเป็น:

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

ด้วยwebpack2รุ่นล่าสุดและช่วงเวลาที่คุณสามารถทำได้:

import {fn as moment} from 'moment'

จากนั้นในตัวwebpack.config.jsคุณ:

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