Underscore: WebPack mengemulasi memerlukan ('garis bawah') salah

Maaf mendengar bahwa ini menggigit Anda, @dmaicher. Namun saya tidak dapat mereproduksi ini dengan Garis Bawah 1.10.2 dan garis bawah.string 3.3.5. Apakah ada sesuatu yang istimewa tentang pengaturan Anda?

Terima kasih atas balasan cepat Anda :blush:

Saya menggunakan [email protected] dan masalah terjadi dengan kode yang dibundel untuk browser. Ketika saya menjalankan kode dengan node pada CLI maka tampaknya baik-baik saja :confused:

Ini adalah pereproduksi minimal: https://github.com/dmaicher/underscore_issue_2852

Inilah masalah Anda:

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

Jalur impor itu, underscore/modules/index-all.js , harus diperoleh WebPack dari bidang module di package.json :

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

sedangkan bidang main adalah yang seharusnya digunakan, mengingat Anda menggunakan impor CommonJS. module adalah untuk impor ES dalam alat yang mendukungnya, main untuk semua orang lainnya. Ini menjelaskan mengapa kode Anda berfungsi dengan import tetapi tidak dengan require() .

Rupanya, WebPack saat ini mengasumsikan modul ES secara default tetapi memiliki cadangan untuk impor CommonJS. Saya kira Anda harus mengonfigurasinya entah bagaimana untuk tidak menganggap modul ES atau mengabaikan bidang module . Atau mungkin Anda ingin beralih ke modul ES.

Saya menutup ini sekarang karena ini adalah masalah WebPack daripada masalah Garis Bawah. Jangan ragu untuk terus berkomentar.

@jgonggrijp terima kasih telah memeriksa :+1:

Saya dapat memperbaikinya dengan menambahkan alias untuk menyelesaikan di konfigurasi webpack:
'underscore': 'underscore/underscore.js',

Tapi bagi saya ini agak aneh. Banyak paket lain yang saya gunakan tentukan "main" dan "module" di dalam package.json mereka dan bagi mereka itu berfungsi dengan baik.

Webpack mengambil bidang pertama yang ditemukan dalam urutan ['browser', 'module', 'main']
Lihat https://webpack.js.org/configuration/resolve/#resolvemainfields

Saya ingin tahu mengapa itu hanya gagal untuk garis bawah tetapi tampaknya berfungsi untuk paket lain :blush:

Jika Anda menyebutkan paket-paket lain itu, saya senang melihatnya. Bagaimanapun, module dan main tidak dimaksudkan untuk dipertukarkan, jadi WebPack memperlakukan mereka seperti itu tidak beralasan:

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

Dokumentasi yang Anda tautkan memberi petunjuk pada solusi yang mungkin sedikit kurang jelek, yaitu dengan mengatur resolve.mainFields ke ['main'] . Sekali lagi, saya percaya WebPack seharusnya tidak mempertimbangkan module sejak awal, karena Anda menggunakan impor CommonJS.

Untuk berjaga-jaga, inilah beberapa paket yang saya gunakan yang memiliki module dan 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

Masalah webpack terkait: https://github.com/webpack/webpack/issues/5756

Ya, itu adalah masalah Anda. Meskipun tampaknya juga ada yang salah dengan cara WebPack meniru CommonJS saat menyelesaikan ke module . Tampaknya melakukan sesuatu seperti ini:

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

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

Baris terakhir akan masuk akal jika Anda melakukan ini:

import * as _ from 'underscore';

tetapi apa yang sebenarnya Anda lakukan setara dengan ini:

import _ from 'underscore';

dan cara yang tepat untuk menerjemahkannya ke ES3 di WebPack adalah sebagai berikut:

var _ = underscoreESModule['default'];

Ini juga merupakan masalah yang dihadapi orang lain di webpack/webpack#5756.

Alat build lain seperti Browserify dan Rollup menangani ini dengan lebih cerdas. Hanya mengatakan...