Moment: أضف تعليمات الاستخدام مع حزمة الويب

لم أستخدم Webpack مطلقًا ، لذا فأنا لست متأكدًا من ماهية هذه التعليمات. هل كنت قادرًا على معرفة ذلك؟ إذا كان الأمر كذلك ، يمكننا إضافة تعليماتك.

شكرا على الرد.

ليس بعد ، لكنني سأبقيك على اطلاع.

ملفات اللغة تبحث عن وحدة moment . انظر العنوان:

    if (typeof define === 'function' && define.amd) {
        define(['moment'], factory); // AMD

moment هو الاسم الصحيح لهذه الوحدة (انظر package.json) وكل شيء يعمل فقط إذا قمت بتثبيته من npm.

fernandoacorreia اسم المجلد الخاص بك momentjs .

icambron لماذا لا يكون define(['../moment'], factory); كما هو الحال مع CommonJs؟

سيكون من الأفضل أن يكون ترتيب CommonJs و AMD متسقًا في ملفات lang وملف moment.js.

تتضمن حزمة الويب افتراضيًا جميع اللغات بسبب هذا البيان require('./lang/' + k); . يمكنك تجاوز هذا بـ ContextReplacementPlugin :

new webpack.ContextReplacementPlugin(/moment[\\\/]lang$/, /^\.\/(en-gb|de|pl)$/)

sokra شكرًا على توضيح التناقض في تعريفات الوحدة. icambron هل يمكنك إلقاء نظرة على هذه الاقتراحات؟

بالمناسبة ، تمت تسمية الدليل momentjs لأنني قمت بتثبيته باتباع الإرشادات هنا :

bower install --save momentjs

أعلن عن اسم المسار عند الطلب ، مثل require ('momentjs/min/moment-with-langs.js') .

حسنًا ... إنه يعمل إذا كنت تستخدم تعليمات node.js.

sokra هذا يساعد. شكرا جزيلا لتصحيح هذا. على الرغم من أنني لا أريد تثبيته عبر npm ؛ أقوم بتثبيت جميع تبعيات الواجهة الأمامية الخاصة بي عبر bower وأبحث فقط عن الوحدات في bower_components .

icambron لتحديث التعليمات لجعلها متوافقة مع حزمة الويب (وعلى الأرجح برامج تحميل الوحدات الأخرى) ، قم بتغيير هذا السطر في المستندات :

bower install --save momentjs

ل:

bower install --save moment=momentjs

عملت تعليمات npm بالنسبة لي ، ولكن لم تكن bower install --save moment=momentjs

Sigfried كيف يبدو ملفك bower.json ؟ منجم لديه هذا الخط:

"moment": "momentjs#~2.5.1"

لدي webpack.config.js :

module.exports = {
  resolve: {
    alias: {
      moment: 'moment/moment.js',
    },
    modulesDirectories: ['app/bower_components']
  }
};

أنا أطلب لحظة كما يلي:

var moment = require('moment');

أنا أستخدم بنية دليل Yeoman قياسية.

أن فعل ذلك بالنسبة لي. شكرا!
(باستثناء أنني لم أكن أستخدم Yeoman والآن أتساءل عما إذا كنت بحاجة إلى البدء في فعل ذلك ... نظام جافا سكريبت البيئي رائع ، لقد أمضيت الأشهر الثلاثة الماضية لا أفعل شيئًا سوى توفير الوقت! :)

الآن يمكنك استخدام تثبيت التعريشة - حفظ اللحظات

ichernev يبدو ذلك جيدًا. في هذه الحالة ، أعتقد أن تحديث وثائق مكان استخدامه من شأنه حل هذه المشكلة.

تأخرت قليلاً في هذا الأمر ، ولكن الآن يمكن للمرء استخدام البرنامج المساعد المقدم

    plugins: [
        new webpack.ProvidePlugin({
           "window.moment": "moment"
        }),
        new BowerWebpackPlugin()
    ]

كما اقترح sokra ، لقد أضفت المكون الإضافي التالي من أجل طلب اللغة المحلية الضرورية فقط. لاحظ أيضًا أنه تم تغيير الدليل lang الموجود في moment إلى locale .

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|ko|ja|zh-cn)$/)
]

تمت إضافة عنصر المستند كـ moment / momentjs.com # 269. سوف تتبع هناك.

أنا أستخدم es6 ، و printcript ، وقواعد tslint شديدة الضيق. هذا ما فعلته في النهاية للحصول على لحظة في المشروع:

استيراد "expose؟ moment! import؟ this => window & export => false & select => false! export؟ window.moment! moment"؛

لقد قمت للتو بإنشاء مجلد "locale" فارغ في نفس المجلد مثل "moment.min.js" ، بحيث يتضمن جميع ملفات js في هذا المجلد.

إنه اختراق ولكنه يعمل.

لتحميل اللغات في Webpack lazy / بشكل ديناميكي ، يمكنك استخدامها مع bundle-loader :

الخطوة 1 - في تكوين حزمة الويب:

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // to not to load all locales

الخطوة الثانية - في كود العميل:

require('bundle!moment/locale/' + locale + '.js')(function () {
  moment().locale(locale).format('lll');
  // note that now you can use the locale even outside of this callback
});

في حالتي (webpack + npm install moment ) كانت المشكلة مع حزمة الويب التي تبحث عن لغات داخل المجلد src/lib/locale ، لأن هذا هو المكان الذي تم فيه اختيار moment.js .

لقد قمت بإزالة المجلد node_modules/moment/src تمامًا ، وقمت بتعيين لحظة الاستيراد الخاصة به باستخدام على سبيل المثال:

import moment from 'moment';
import 'moment/locale/en-gb';
moment.locale('en-gb');

كل شيء يعمل بشكل مثالي ، ولا توجد تحذيرات ، ويتم تضمين فقط اللغات التي أستوردها صراحةً في الإنشاء (حتى بدون استخدام webpack.ContextReplacementPlugin كما هو موضح في هذا التعليق ، الذي أضفته في البداية)

micheleb السبب الحقيقي للبحث في هذا المجلد الفرعي هو الإعداد غير الصحيح لـ jsnext:main في momentjs package.json ، والذي يحترمه webpack 2.

يجب أن يشير jsnext:main _not_ إلى رمز المصدر الأولي ، ولكن إلى إنشاء الوحدة النمطية التي لا تستخدم بنية الوحدة النمطية ES6.

يمكن حل هذه المشكلة عن طريق تسمية 'moment' إلى 'moment/moment.js' ("main" العامة) في تكوين حزمة الويب ( resolve: { alias: { moment: 'moment/moment.js' } } ).

تحرير: بدلاً من ذلك ، استخدام ContextReplacementPlugin الذي يستخدم البيانات المحلية من src dir (أي أن طلب نفس الوحدة moment مثل jsnext:main ) هو مشابه ل:

new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
  if (!/\/moment\//.test(context.context)) { return }
  // context needs to be modified in place
  Object.assign(context, {
    // include only CJK
    regExp: /^\.\/(ja|ko|zh)/,
    // point to the locale data folder relative to moment's src/lib/locale
    request: '../../locale'
  })
}),

ربما يمكن كتابة هذا بدون استخدام رد النداء ، لكنني أردت أن أكون "أكثر ثقة" من أن هذا ينطبق فقط على طلب ./locale داخل الوحدة moment .

تأكد من أن request لا يشير إلى ../../../locale ؛ بينما سيتم تجميع ذلك ، سينتج عنه نسختان كاملتان من moment مجمعة.

sokra ماذا يحدث إذا تم تعيين async: true في السياق؟ أستطيع أن أرى أن الوحدات النمطية يتم إنشاؤها كأجزاء منفصلة إذا قمت بذلك ، ولكن ما هو سلوك وقت التشغيل المتوقع ؛ تحطم؟ أفترض أنه true "افتراضيًا" إذا تم استدعاؤه للتعامل مع سياق require.ensure / System.import 's؟

هل تم إصلاح هذا؟ إذا لم يكن كذلك ، فهل يجب إعادة فتحه؟

لماذا تم إغلاق هذا؟ هذه لا تزال مشكلة تحدث.

تضمين التغريدة

"أعتقد أن تحديث الوثائق من شأنه أن يحل هذه المشكلة."

"تمت إضافة عنصر المستند كـ moment / momentjs.com # 269. سيتم التتبع هناك."

لذلك ، تم إغلاق المشكلة هنا لأنه حلت محلها مشكلة في موقع توثيق Moment على الويب. نود أن يكتب شخص ما خطابًا عامًا هناك لحل Momentjs.com # 269.

تضمين التغريدة

نجح هذا الإصلاح بالنسبة لي:

1. قم بتثبيت npm
2. افتح vendor.ts وأضف السطر import 'moment'

كمرجع:
باستخدام Angular2 v2.0.0 ، Webpack ^ 1.13.0

هل من الممكن عدم تضمين كل الإعدادات المحلية دون إضافة تكوينات إلى حزمة الويب؟ أنا أستخدم تطبيق create-react-app وليس لدي القدرة على تحرير ملف تهيئة webpack.

أنا أبحث في كل مكان ويبدو دائمًا أنه أعود لإضافة سطر تكوين في حزمة الويب.
https://github.com/moment/moment/issues/2373
https://github.com/moment/moment/issues/2416

متفق عليه ، أعتقد أن طلب المواقع يجب أن يكون صريحًا فقط ، وليس ضمنيًا.

إنه واضح جدًا وفقًا لعدد المشكلات التي أثيرت هنا في الوقت الحالي ، في webpack ، في bower ، npm ، والوقت الذي يقضيه الجميع في التحايل عليه منذ عدة سنوات.

تضمين التغريدة

لقد قمت بتثبيت حزم npm ، ولكن عندما أقوم بذلك

استيراد لحظة من "لحظة-المنطقة الزمنية" ؛

دائمًا ما تكون اللحظة غير محددة. كيف ذلك؟

أواجه نفس المشكلة باستخدام مشروع Angular 2 CLI. هل وجد أي شخص حلاً عملياً حتى الآن؟

البحث عن أدلة لمشروع Angular CLI أيضًا

أي أدلة على Angular CLI؟

كما ترون لقد سألت منذ 4 أشهر عن CLI ولا توجد إجابات ، كان حلنا هو استبدال اللحظة بـ date-fns ، وبما أننا نستخدم أيضًا chartjs في مشروعنا وله تبعية للحظة ، فنحن في عملية لتحل محل ذلك أيضا.

حل لطيف للغاية
https://github.com/moment/momentjs.com/pull/489