মুহূর্ত.js কে কীভাবে ওয়েবপ্যাকের সাথে লোকেড লোড করা থেকে রোধ করবেন?


199

আপনি moment.jsযখন ওয়েবপ্যাকটি ব্যবহার করছেন তখন সমস্ত লোকেল (আমার কেবল ইংরেজী দরকার) লোড করা থেকে আপনি কি কোনও উপায় বন্ধ করতে পারেন ? আমি উত্সটি দেখছি এবং মনে হচ্ছে এটি যদি hasModuleসংজ্ঞায়িত হয়, যা এটি ওয়েবপ্যাকের জন্য, তবে এটি সর্বদা require()প্রতিটি লোকালে চেষ্টা করে। আমি নিশ্চিত যে এটি ঠিক করার জন্য একটি টান অনুরোধ প্রয়োজন। তবে ওয়েবপ্যাক কনফিগারেশনের মাধ্যমে আমরা কোনও সমাধান করতে পারি?

মুহুর্তগুলি লোড করার জন্য এখানে আমার ওয়েবপ্যাক কনফিগারেশনটি রয়েছে:

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

তারপরে যে কোনও জায়গায় আমার এটি প্রয়োজন, আমি কেবল এটি করি require('moment')। এটি কাজ করে তবে এটি আমার বান্ডেলে প্রায় 250 কেবি অপ্রয়োজনীয় ভাষা ফাইল যুক্ত করছে। এছাড়াও আমি momentjs এবং gulp এর বোরવર সংস্করণ ব্যবহার করছি।

এছাড়াও এটি যদি ওয়েবপ্যাক কনফিগারেশনের মাধ্যমে স্থির করা না যায় তবে এখানে ফাংশনটির লিংক যেখানে এটি লোকালগুলি লোড করে । আমি বিবৃতিটি যুক্ত && module.exports.loadLocalesকরার চেষ্টা করেছি ifতবে আমার ধারণা ওয়েবপ্যাকটি এমনভাবে কাজ করে না যেখানে এটি কাজ করবে। এটা ঠিক requireকোন ব্যাপার না। আমি মনে করি এটি এখন একটি রেজেক্স ব্যবহার করে তাই আপনি কীভাবে এটি স্থির করতে পারেন তা আমি সত্যিই জানি না।


আপনি কি এর nmpপরিবর্তে মুহূর্তটি ব্যবহার করার চেষ্টা করেছেন bower?
Andreas Köberle

আমি আমার সমস্ত ক্লায়েন্ট libs এবং আমার সমস্ত বিল্ড সরঞ্জামের জন্য এনপিএম ব্যবহার করি। আমার প্রকল্পগুলি কীভাবে ছড়িয়ে দেওয়া হয়েছে তার কারণে আমি এটিকে এভাবেই রাখতে চাই। এছাড়াও আপনি যদি github.com/moment/moment/issues/1866 এর শেষ জবাবটি দেখেন আমি নিজের সমস্যাটি সমাধান করেছি তবে এটির জন্য একটি সামান্য উত্স সম্পাদনা প্রয়োজন। আপনি কীভাবে নোড এবং ওয়েবপ্যাকের মধ্যে পার্থক্য করবেন তা আমি জানি না কেন কীভাবে এটি সঠিকভাবে ঠিক করতে হয় তা আমি এখনও জানি না।
এপেল্ক

উত্তর:


304

কোডটি ডিরের require('./locale/' + name)প্রতিটি ফাইল ব্যবহার করতে পারে locale। সুতরাং ওয়েবপ্যাক আপনার বান্ডিলের প্রতিটি ফাইল মডিউল হিসাবে অন্তর্ভুক্ত করে। আপনি কোন ভাষাটি ব্যবহার করছেন তা এটি জানতে পারে না।

এমন দুটি প্লাগইন রয়েছে যা ওয়েবপ্যাককে আপনার বান্ডেলে কোন মডিউলটি অন্তর্ভুক্ত করা উচিত সে সম্পর্কে আরও তথ্য দেওয়ার জন্য দরকারী: 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$/)
  ]
};

3
আপনি কীভাবে উপেক্ষা করুন লোডার ব্যবহার করবেন তা ব্যাখ্যা করতে পারেন? আমি চেষ্টা করেছি `নতুন ওয়েবপ্যাকরেগ.আইগনোর প্লাগিন (/\.\/ লোকাল \ /.++ জেএস $ /, [])` তবে তা কার্যকর হয়নি। এছাড়াও প্রসঙ্গেপরিবর্তন প্লাগইনটি এখনও আমার বান্ডলে ফাইলগুলি অন্তর্ভুক্ত করেছে আমার মনে হয় এটি সেগুলি ব্যবহার করে নি।
Epelc

9
আপনি এই ইস্যুটি ( github.com/webpack/webpack/issues/198 ) একবার দেখে নিতে পারেন যা মুহুর্ত + ওয়েবপ্যাক সম্পর্কে বিশদ আলোচনা রয়েছে।
টোবিয়াস কে।

2
আপনাকে ধন্যবাদ আমি মনে করি new webpack.IgnorePlugin(/^\.\/lang$/, /moment$/)গিথুব সম্পর্কে আপনার মন্তব্যটি কাজ করবে।
Epelc

16
ওয়েবপ্যাক ডক্সে, দ্বিতীয় যুক্তিটি হ'ল রেগেক্সগুলির একটি অ্যারে। আমি চেষ্টা করেছি plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]) ],যা ঠিক কাজ করেছে।
অ্যালেক্স কে

6
বন্ধনী স্বরলিপি @AlexKinnee ডক্সে মানে একটি ঐচ্ছিক যুক্তি, না একটি অ্যারে।
ইয়াংমিলস্টিওরি

8

আমাদের প্রকল্পে আমি এই মুহুর্তটি অন্তর্ভুক্ত করেছি: import moment from 'moment/src/moment';এবং এটি কৌশলটি মনে হচ্ছে। আমাদের মুহুর্তের ব্যবহার যদিও খুব সহজ, তাই SDK এর সাথে কোনও অসঙ্গতি থাকবে কিনা তা আমি নিশ্চিত নই। আমি মনে করি এটি কাজ করে কারণ ওয়েবপ্যাক স্ট্যাটিকভাবে লোকেল ফাইলগুলি কীভাবে সন্ধান করতে পারে তা জানে না, সুতরাং আপনি একটি সতর্কতা পান (একটি খালি ফোল্ডার যুক্ত করে এটি আড়াল করা সহজ moment/src/lib/locale/locale) তবে কোনও লোকেলের অন্তর্ভুক্ত নেই।


1
নিশ্চিত না ছেলেরা আপনার পক্ষে এটি কীভাবে কাজ করছে ... আমি ঠিক সেই github.com/angular/angular-cli/issues/6137 এর সাথে লড়াই করার চেষ্টা করেছি এবং তারপরে github.com/ksloan/moment-mini ব্যবহার করে শেষ হয়েছিল । সঠিক মডুলার momentলাইব্রেরিটি 3 পর্যায়ে github.com/moment/moment/milestone/15 সংস্করণে উপস্থিত হবে।
কুনসেভিচ.দেব

3

সঠিক মডুলার momentলাইব্রেরির সাথে আসতে হবে সংস্করণ 3 কিছু সময়ে তাই বর্তমানে আমি কৌণিক-CLI ব্যবহার করছি ছাড়া --ejectআমি শুধু ব্যবহারের শেষ পর্যন্ত https://github.com/ksloan/moment-mini মতimport * as moment from 'moment-mini';


2

অ্যাডাম ম্যাকক্রিমিকের উত্তরের ভিত্তিতে, আপনি নিকটে ছিলেন, আপনার উপনামটি এতে পরিবর্তন করুন:

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

1
কেবলমাত্র সতর্কতার একটি শব্দ, এটি আপনার অন্তর্ভুক্ত সমস্ত মডিউলগুলির আচরণের পরিবর্তন করবে এবং তৃতীয় পক্ষের লাইব্রেরিগুলির সাথে আকর্ষণীয় সমস্যা তৈরি করতে পারে। যদিও এটি সাধারণভাবে কাজ করা উচিত
অ্যাডাম ম্যাককর্মিক

1
তুমি কি বিস্তারিত বলতে পারো ? আমি সমস্ত উপন্যাস ব্যবহারের ক্ষেত্রে অভিজ্ঞ নই। আমার বোধগম্যতা অনুসারে, আপনি যদি কেবল সেই মডিউলটি স্পর্শ করেন তবেই বিষয়টি
বিবেচিত হবে

3
যখন আপনি সমাধানের বিকল্পটি সেট করেন, সেগুলি আপনার সিস্টেমে যে কোনও আমদানি বা প্রয়োজনীয়তার ক্ষেত্রে প্রযোজ্য (আপনার উপর নির্ভরশীল লাইব্রেরি সহ)। সুতরাং যদি কোনও মডিউল আপনি প্রয়োজনীয় মুহুর্তের উপর নির্ভর করেন তবে আপনি সেই মডিউলটির ফলাফলও পরিবর্তন করবেন। আপনি যদি নির্ভরশীলতা গাছের নোড মডিউলটির সাথে দ্বন্দ্ব করেন এমন কোনও উপাধি সেট করতে দেখা যায় (উদাহরণস্বরূপ "ইভেন্ট" যেমন আপনার নির্ভরতা যদি সেই লাইব্রেরি ব্যবহার করে তবে)। অনুশীলনে, আমি কেবল নাম দ্বন্দ্ব নিয়ে একটি সমস্যা পেয়েছি, আচরণের এই জাতীয় পরিশোধন নয়, তবে একটি আমদানির বিবৃতি পরিবর্তনের চেয়ে এটি আরও বিপজ্জনক পদ্ধতি।
অ্যাডাম ম্যাককর্মিক

2

সঙ্গে webpack2এবং মুহূর্ত আপনি কি করতে পারেন সাম্প্রতিক সংস্করণ:

import {fn as moment} from 'moment'

এবং তারপরে webpack.config.jsআপনি যা করছেন:

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

1
আমার ধারণা আপনার অর্থmainFields: ...
গিলারমো গ্রু

ওয়েবপ্যাক 2 দেখুন, বেশ নিশ্চিত যে ক্ষেত্রের নামটি পরিবর্তিত হয়েছে।
কেভিন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.