Underscore: تتطلب عمليات محاكاة WebPack ("شرطة سفلية") بشكل غير صحيح

آسف لسماع أن هذا يعضك ، @ dmaicher. ومع ذلك ، لا يمكنني إعادة إنتاج هذا باستخدام الشرطة السفلية 1.10.2 والشرطة السفلية.السلسلة 3.3.5. هل هناك أي شيء مميز بخصوص الإعداد الخاص بك؟

شكرا لردكم السريع: أحمر الخدود:

أنا أستخدم [email protected] وتحدث المشكلة مع الكود المرفق بالمتصفح. عندما أقوم بتشغيل الكود مع العقدة على CLI ، يبدو الأمر على ما يرام: confused:

هنا هو الحد الأدنى من إعادة الإنتاج: https://github.com/dmaicher/underscore_issue_2852

ها هي مشكلتك:

https://github.com/dmaicher/underscore_issue_2852/blob/348eef226ec7392b2ced2b92ddf2fcba2517ab5c/public/build/app.js#L13

مسار الاستيراد هذا ، underscore/modules/index-all.js ، يجب أن يكون WebPack قد حصل عليه من الحقل module في package.json :

https://github.com/jashkenas/underscore/blob/5d8ab5e37c9724f6f1181c5f95d0020815e4cb77/package.json#L17 -L18

بينما الحقل main هو ما كان يجب استخدامه ، نظرًا لأنك تستخدم عمليات استيراد CommonJS. module لواردات ES في الأدوات التي تدعمها ، main لأي شخص آخر. يفسر هذا سبب عمل شفرتك مع import ولكن ليس مع require() .

على ما يبدو ، يفترض WebPack في الوقت الحاضر وحدات ES بشكل افتراضي ولكن لديه احتياطي لواردات CommonJS. أعتقد أنه سيتعين عليك تكوينه بطريقة ما لعدم افتراض وحدات ES أو تجاهل الحقل module . أو ربما تريد التبديل إلى وحدات ES.

أقوم بإغلاق هذا الآن لأن هذه مشكلة WebPack وليست مشكلة تسطير سفلي. لا تتردد في مواصلة التعليق ، رغم ذلك.

jgonggrijp شكرا للتحقق: +1:

تمكنت من إصلاحه عن طريق إضافة اسم مستعار للحل في webpack config:
'underscore': 'underscore/underscore.js',

لكن هذا يبدو غريبا بعض الشيء بالنسبة لي. العديد من الحزم الأخرى التي أستخدمها تحدد "main" و "module" داخل package.json و تعمل بشكل جيد بالنسبة لهم.

يأخذ Webpack الحقل الأول الذي يجده بالترتيب ['browser', 'module', 'main']
راجع https://webpack.js.org/configuration/resolve/#resolvemainfields

أشعر بالفضول لسبب فشلها فقط للشرطة السفلية ولكن يبدو أنها تعمل مع حزم أخرى: أحمر الخدود:

إذا سميت تلك الحزم الأخرى ، يسعدني إلقاء نظرة عليها. على أي حال ، لا يمكن استبدال module و main ، لذا فإن تعامل WebPack معهما على هذا النحو غير مبرر:

https://github.com/rollup/rollup/wiki/pkg.module

تشير الوثائق التي ربطتها إلى حل ربما يكون أقل قبحًا ، وهو تعيين resolve.mainFields إلى ['main'] . مرة أخرى ، أعتقد أن WebPack لا ينبغي أن يفكر في module في المقام الأول ، نظرًا لأنك تستخدم عمليات استيراد CommonJS.

فقط في حالة وجود بعض الحزم التي أستخدمها والتي تحتوي على كل من module و main :

https://www.npmjs.com/package/vuejs-datepicker
https://www.npmjs.com/package/bootstrap-vue
https://www.npmjs.com/package/acorn
https://www.npmjs.com/package/perfect-scrollbar

مشكلة حزمة الويب ذات الصلة: https://github.com/webpack/webpack/issues/5756

نعم ، هذه هي مشكلتك. على الرغم من أنه يبدو أيضًا أن هناك شيئًا ما بعيدًا عن الطريقة التي يحاكي بها WebPack CommonJS عند الانتقال إلى module . يبدو أنها تفعل شيئًا كالتالي:

// converting modules/index-all.js to ES3
var underscoreESModule = {
    'default': _,
    map: _.map,
    filter: _.filter,
    // ...
};

// in your code that imports underscore
var _ = underscoreESModule;

سيكون السطر الأخير منطقيًا إذا كنت تفعل هذا:

import * as _ from 'underscore';

لكن ما تفعله في الواقع يعادل هذا:

import _ from 'underscore';

والطريقة الصحيحة لترجمة ذلك إلى ES3 في WebPack ستكون على النحو التالي:

var _ = underscoreESModule['default'];

هذه أيضًا هي المشكلة التي يواجهها الآخرون في webpack / webpack # 5756.

أدوات البناء الأخرى مثل Browserify و Rollup تتعامل مع هذا بشكل أكثر ذكاء. فقط أقول...