वेबपैक के साथ लोकेशन लोड करने के क्षणों को कैसे रोकें?

Question

क्या कोई रास्ता है जिसे आप रोक सकते हैं moment.jsजब आप वेबपैक का उपयोग कर रहे हैं तो जिससे सभी स्थानों को लोड (मुझे सिर्फ अंग्रेजी की आवश्यकता है)? मैं स्रोत को देख रहा हूं और ऐसा लगता है कि अगर hasModuleइसे परिभाषित किया गया है, जो कि वेबपैक के लिए है, तो यह हमेशा require()हर स्थान पर कोशिश करता है । मुझे पूरा यकीन है कि इसे ठीक करने के लिए एक पुल अनुरोध की आवश्यकता है। लेकिन क्या कोई तरीका है जिससे हम इसे वेबपैक कॉन्फिगरेशन के साथ ठीक कर सकते हैं?

यहाँ क्षणों को लोड करने के लिए मेरा वेबपैक विन्यास है:

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

तब कहीं भी मुझे इसकी आवश्यकता होती है, मैं बस करता हूं require('moment')। यह काम करता है लेकिन यह मेरे बंडल में लगभग 250 kB की अनावश्यक भाषा फ़ाइलों को जोड़ रहा है। इसके अलावा मैं bjjs और gulp के बोवर संस्करण का उपयोग कर रहा हूं।

इसके अलावा अगर यह वेबपैक कॉन्फिगरेशन द्वारा तय नहीं किया जा सकता है तो यह उस फंक्शन का लिंक है जहां यह लोकेशंस लोड करता है । मैंने बयान में जोड़ने की कोशिश की && module.exports.loadLocales, ifलेकिन मुझे लगता है कि वेबपैक वास्तव में उस तरह से काम नहीं करता है जहां यह काम करेगा। यह सिर्फ requireकोई बात नहीं है। मुझे लगता है कि यह अब एक रेगीक्स का उपयोग करता है इसलिए मुझे वास्तव में नहीं पता है कि आप इसे ठीक करने के बारे में कैसे जाएंगे।

Comments

क्या आपने nmpइसके बजाय पल का उपयोग करने की कोशिश की है bower?

— एंड्रियास कोबर्ले

मैं अपने सभी क्लाइंट लिब के लिए bower का उपयोग कर रहा हूं, और अपने सभी बिल्ड टूल्स के लिए npm। मैं इसे इस तरह से रखना चाहता हूं क्योंकि मेरी परियोजनाएं कैसे निर्धारित की जाती हैं। इसके अलावा अगर आप github.com/moment/moment/issues/1866 के अंतिम उत्तर को देखते हैं तो मैंने अपनी समस्या हल कर ली है, लेकिन इसके लिए एक मामूली स्रोत संपादन की आवश्यकता है। मुझे अभी भी नहीं पता है कि इसे कैसे ठीक किया जाए क्योंकि मैं नहीं जानता कि आप नोड और वेबपैक के बीच कैसे भेद करेंगे।

— एपीएल

Answer 1

कोड require('./locale/' + name)में हर फ़ाइल का उपयोग कर सकते हैंlocale dir । इसलिए वेबपैक आपके बंडल में मॉड्यूल के रूप में हर फ़ाइल को शामिल करता है। यह नहीं जान सकते कि आप किस भाषा का प्रयोग कर रहे हैं।

ऐसे दो प्लगइन्स हैं जो वेबपैक को अधिक जानकारी देने के लिए उपयोगी हैं कि आपके बंडल में किस मॉड्यूल को शामिल किया जाना चाहिए: ContextReplacementPluginऔर IgnorePlugin।

require('./locale/' + name)एक संदर्भ (एक आवश्यकता जिसमें एक अभिव्यक्ति शामिल है) कहा जाता है । वेबपैक इस कोड के टुकड़े से कुछ जानकारी को संक्रमित करता है: एक निर्देशिका और एक नियमित अभिव्यक्ति। यहां: 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$/)
  ]
};

Comments

क्या आप बता सकते हैं कि इग्नोर लोडर का उपयोग कैसे करें? मैंने `नया वेबपैक आई.आई.ई.ओ.ई। ई। पोरग्लिन (/\.\/ लोकेल \ / .+। Js $ /, [])` की कोशिश की, लेकिन यह काम नहीं किया। इसके अलावा संदर्भरिप्लमेंटप्लगिन में अभी भी मेरे बंडल में फाइलें शामिल हैं मुझे लगता है कि यह उनका उपयोग नहीं कर रहा था।

— उपसंहार

आप इस मुद्दे पर एक नज़र डाल सकते हैं ( github.com/webpack/webpack/issues/198 ) जिसमें पल + वेबपैक के बारे में विस्तृत चर्चा की गई है।

— टोबियास के।

धन्यवाद, मुझे लगता है कि new webpack.IgnorePlugin(/^\.\/lang$/, /moment$/)github पर आपकी टिप्पणी से काम चल जाएगा।

— epelc

वेबपैक डॉक्स में, दूसरा तर्क रेगेक्स की एक सरणी है। मैंने कोशिश की plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]) ],जो ठीक काम किया।

— एलेक्स के

@AlexKinnee डॉक्स में ब्रैकेट अंकन का अर्थ है कि यह एक वैकल्पिक तर्क है, न कि एक सरणी।

— यांगमिलस्टेहोरी

Answer 2

हमारी परियोजना में, मैं इस तरह के क्षण को शामिल करता हूं: import moment from 'moment/src/moment';और यह चाल को लगता है। हालांकि हमारा उपयोग बहुत सरल है, लेकिन मुझे यकीन नहीं है कि एसडीके के साथ कोई असंगतता होगी। मुझे लगता है कि यह काम करता है क्योंकि WebPack को स्थानीय रूप से फ़ाइलों को खोजने का तरीका नहीं पता है, इसलिए आपको एक चेतावनी मिलती है (जिस पर एक खाली फ़ोल्डर जोड़कर छिपाना आसान है moment/src/lib/locale/locale) लेकिन कोई भी लोकेल शामिल नहीं है।

Comments

यकीन नहीं हो रहा है कि यह व्यक्ति आपके लिए कैसे काम कर रहा है ... मुझे बस उस github.com/angular/angular-cli/issues/6137 से लड़ने की कोशिश की गई थी और फिर github.com/ksloan/moment-mini का उपयोग करके समाप्त कर दिया गया । उचित मॉड्यूलर momentपुस्तकालय कुछ बिंदु पर संस्करण 3 github.com/moment/moment/milestone/15 के साथ आएगा ।

— कुंसविक.देव

Answer 3

उचित मॉड्यूलर momentपुस्तकालय के साथ ऊपर आ जाएगा संस्करण 3 कुछ बिंदु पर तो वर्तमान के रूप में मैं कोणीय CLI उपयोग कर रहा हूँ के बिना --ejectमैं तो बस का उपयोग करने के समाप्त हो गया https://github.com/ksloan/moment-mini की तरहimport * as moment from 'moment-mini';

Answer 4

एडम मैक्रिक के जवाब के आधार पर, आप करीब थे, अपना उपनाम बदलें:

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

Comments

चेतावनी का एक शब्द है, कि यह आपके द्वारा शामिल किए गए सभी मॉड्यूल के लिए व्यवहार को बदल देगा और तीसरे पक्ष के पुस्तकालयों के साथ दिलचस्प मुद्दों का कारण बन सकता है। हालांकि इसे सामान्य रूप से काम करना चाहिए

— एडम मैककॉर्मिक

क्या आप विस्तार से समझा सकते हैं ? मैं सभी उर्फ ​​उपयोग मामलों के साथ अनुभवी नहीं हूं। मेरी समझ में, यह केवल तभी मायने रखता है जब आप उस मॉड्यूल को छूते हैं, इस मामले में 'क्षण'

— bigopon

जब आप रिज़ॉल्यूशन उपनाम सेट करते हैं, तो वे आपके सिस्टम में आयात या आवश्यकता के किसी भी उपयोग पर लागू होते हैं (आपके द्वारा निर्भर पुस्तकालयों सहित)। इसलिए यदि एक मॉड्यूल आप आवश्यक क्षण पर निर्भर करते हैं, तो आप उस मॉड्यूल के लिए भी परिणाम बदल रहे होंगे। यह तब होता है जब आप एक उपनाम सेट करने के लिए होते हैं जो आपके निर्भरता के पेड़ में नोड मॉड्यूल के साथ संघर्ष करता है (उदाहरण के लिए "घटनाओं" यदि आपकी निर्भरता उस पुस्तकालय का उपयोग करती है)। व्यवहार में, मेरे पास केवल नाम संघर्ष के साथ एक मुद्दा था, न कि इस तरह के व्यवहार शोधन, लेकिन यह एक आयात बयान को बदलने की तुलना में अधिक खतरनाक दृष्टिकोण है।

— एडम मैककॉर्मिक

Answer 5

webpack2क्षण के साथ और हाल के संस्करण आप कर सकते हैं:

import {fn as moment} from 'moment'

और फिर webpack.config.jsआप में है:

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

Comments

मुझे लगता है कि आप का मतलब हैmainFields: ...

— गुइलेर्मो गेरू

Webpack2 को देखो, बहुत यकीन है कि क्षेत्र का नाम बदल गया है।

— केविन