Underscore: WebPack은 require('underscore')를 잘못 에뮬레이트합니다.

에 만든 2020년 05월 25일 · 9코멘트 · 출처: jashkenas/underscore

오늘 1.9.2에서 1.10.2로 업데이트했으며 require('underscore'); 사용할 때 믹스인이 더 이상 작동하지 않습니다.

TypeError: _.camelcase is not a function 실패합니다.

const _ = require('underscore');
const underscoreString = require('underscore.string');

_.mixin(underscoreString.exports());

console.log(_.camelcase('foo-bar'));

그러나 이것은 작동합니다.

import _ from 'underscore';
const underscoreString = require('underscore.string');

_.mixin(underscoreString.exports());

console.log(_.camelcase('foo-bar'));

invalid

출처

dmaicher

모든 9 댓글

@dmaicher 님을 물어뜯어서 죄송합니다. 그러나 Underscore 1.10.2 및 underscore.string 3.3.5에서는 이것을 재현할 수 없습니다. 설정에 특별한 것이 있습니까?

jgonggrijp 에 2020년 05월 25일

빠른 답변 감사합니다 :blush:

[email protected] 를 사용하고 있는데 브라우저에 번들로 제공되는 코드에서 문제가 발생합니다. CLI에서 노드로 코드를 실행하면 문제가 없는 것처럼 보입니다.

dmaicher 에 2020년 05월 26일

다음은 최소한의 재생산입니다. https://github.com/dmaicher/underscore_issue_2852

dmaicher 에 2020년 05월 26일

👍1

문제는 다음과 같습니다.

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

그 수입 경로는, underscore/modules/index-all.js 의에서 얻은 웹팩합니다 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 에 2020년 05월 26일

@jgonggrijp 확인

webpack 구성에서 해결하기 위한 별칭을 추가하여 문제를 해결할 수 있었습니다.
'underscore': 'underscore/underscore.js',

그러나 이것은 나에게 조금 이상하게 보입니다. 많은 다른 패키지는 내가 지정 사용 "main" 및 "module" 자신의 내부 package.json 그들을 위해 작동 잘.

Webpack은 ['browser', 'module', 'main'] 순서로 찾은 첫 번째 필드를 사용합니다.
https://webpack.js.org/configuration/resolve/#resolvemainfields 참조

밑줄에만 실패하지만 다른 패키지에서는 작동하는 것처럼 보이는 이유가 궁금합니다.

dmaicher 에 2020년 05월 26일

👍1

다른 패키지의 이름을 지정하면 기꺼이 살펴보겠습니다. 어쨌든 module 및 main 는 상호 교환이 가능하지 않으므로 WebPack이 이를 그대로 취급하는 것은 부당합니다.

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

링크된 문서는 resolve.mainFields 를 ['main'] 로 설정하는 약간 덜 추한 솔루션에 대한 힌트를 제공합니다. 다시 말하지만 WebPack은 CommonJS 가져오기를 사용하고 있기 때문에 처음부터 module 를 고려해서는 안 된다고 생각합니다.

jgonggrijp 에 2020년 05월 26일

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

dmaicher 에 2020년 05월 26일

관련 웹팩 문제: https://github.com/webpack/webpack/issues/5756

dmaicher 에 2020년 05월 26일

예, 그것은 당신의 문제입니다. module 해석할 때 WebPack이 CommonJS를 에뮬레이트하는 방식에도 문제가 있는 것 같습니다. 다음과 같은 작업을 수행하는 것으로 보입니다.

// 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';

WebPack에서 ES3로 변환하는 올바른 방법은 다음과 같습니다.

var _ = underscoreESModule['default'];

이것은 다른 사람들이 webpack/webpack#5756에서 겪고 있는 문제이기도 합니다.

Browserify 및 Rollup과 같은 다른 빌드 도구는 이를 보다 지능적으로 처리합니다. 말만...

jgonggrijp 에 2020년 05월 26일

👍1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Underscore: WebPack은 require('underscore')를 잘못 에뮬레이트합니다.

모든 9 댓글

관련 문제