Three.js: 예제 jsm 모듈을 가져오면 번들러가 three.js 소스 코드를 두 번 번들로 만듭니다.

(롤업으로 테스트)

롤업으로 확인할 수 없습니다. 다음 프로젝트 설정과 같이 하면 모든 것이 예상대로 작동합니다.

https://github.com/Mugen87/three-jsm

three 를 외부 종속성으로 취급하는 경우:

export default {
    input: 'src/main.js',
    external: ['three'],
    output: [
        {
            format: 'umd',
            name: 'LIB',
            file: 'build/main.js'
        }
    ],
    plugins: [ resolve() ]
};

그러면 출력에 three.js의 소스 코드가 포함되지 않아야 하지만 모든 것이 포함됩니다.

그러나 OrbitControls를 가져오지 않으면 main.js 파일의 소스 코드만 출력에 포함됩니다.

OrbitControls import 를 주석 처리한 다음 다시 빌드하여 시도해 볼 수 있습니다(그러나 'three' 를 외부 종속성으로 사용).

이것은 #17220과 관련이 있습니다. 제안된 솔루션 중 하나는 package.json 의 main 필드를 모듈 빌드 경로로 바꾸는 것이지만 이 사용 사례는 수정되지 않습니다.

여기서 문제를 명확히 하기 위해 ../../../build/three.module.js 대한 하드 참조를 포착하지 않는 롤업 구성의 3개에 의존하는 별도의 패키지를 빌드하기 위해 three 가 외부로 표시되는 동안 빌드에 포함합니다. 예를 들어 다음 파일을 빌드하면 실수로 OrbitControls 코드 _및_ threejs 코드가 번들에 포함될 뿐만 아니라 @adrian-delgado의 게시된 구성으로 빌드할 때 3개의 다른 복사본을 가져옵니다.

// src/main.js
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

console.log(THREE, OrbitControls);

@이 가치에서 그 경우에도 경로 지적 될 수 아드리안 - 델가도 OrbitControls.js 로 변경 three 여전히 또는 원하는되지 않을 수 있습니다 적어도 초래할 수 번들에 포함됩니다 OrbitControls 종속 응용 프로그램에 두 번 포함되는 OrbitControls 코드.

이것을 장기 또는 최상의 솔루션으로 제안하려는 것은 아니지만 OrbitControls (및 세 폴더의 모든 파일)을 외부로 표시하도록 구성을 변경하면 두 경우 모두에서 이 문제가 해결됩니다.

export default {
    // ...

    external: p => /^three/.test(p),

    // ...
};

이것을 장기적 또는 최상의 솔루션으로 제안하려는 것은 아니지만 OrbitControls(및 세 폴더의 모든 파일)를 외부로 표시하도록 구성을 변경하면 두 경우 모두에서 이 문제가 해결됩니다.

어떤 이유로 롤업이 기본적으로 'three/examples/jsm/controls/OrbitControls.js' 도 외부로 취급할 것으로 예상했습니다. 따라서 제안한 솔루션은 제 사용 사례에 적합합니다.

관련된 #17220은 매우 관련이 있습니다. 대화는 아마도 그곳에서 계속될 것입니다.

그럼 이렇게 하면 어떻게 될까요?

// src/main.js
import * as THREE from 'three/build/three.module.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

console.log(THREE, OrbitControls);

그것은 작동하지만 3에 의존하는 다른 lib 또는 코드 조각이 "3"에서 가져온 다음 다시 중단되기 때문에 실현 가능하지 않습니다. Package.json은 일반적으로 환경에 해결 방법을 알려줍니다. "build/three.module"은 누출되지 않아야 하는 배포 세부 정보입니다. 해결을 건너뛰면 네임스페이스 문제만 발생합니다.

  external: p => /^three/.test(p),

@gkjohnson 사용자가 "3" 인스턴스와 OrbitControls 를 번들에 포함시키려면 어떻게 해야 합니까?

모듈을 이렇게 라이브로 사용하려고 하면 비슷한 일이 발생하는지 확실하지 않습니다.

import * as three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

three.js를 두 번 로드합니다. 한 번은 CDN에서, 한 번은 threejs.org에서 로드합니다.

모듈이 3개와 함께 사용되어야 하는 방식이 아닐 수도 있지만 106개 이전부터 1000개의 사이트와 예제가 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

모든 예제는 빌드(번들링) 대신 라이브 모듈을 사용하는 것을 보여주므로 어떤 의미에서는 예전처럼 three.js를 사용하는 실제 방법을 보여주지 않습니다. 즉, 이전 예제는 기본적으로 작동했습니다. 새 예제는 AFAIK가 아닙니다. 예제가 작동하려면 예제에서 JavaScript를 추출하고 별도의 .js 파일에 넣은 다음 three.js를 로컬로(아마도 npm을 통해) 넣어야 합니다. 패키지 기반 경로(../.././build 없음)가 되도록 예제의 모든 경로를 수정하고 마지막으로 롤업을 사용합니다.

경로를 변경하는 것만으로도 충분했던 비 모듈 버전에서 꽤 큰 변화입니다.

@mrdoob

@adrian-delgado의 원래 구성으로 three.js는 한 번 포함되고 궤도 제어는 한 번 포함되며 패키지는 외부로 표시되지 않습니다. 내가 제안한 구성에는 생성된 번들의 three/build/three.module.js 및 three/examples/jsm/controls/OrbitControls.js 에 대한 외부 종속성이 있습니다.

@EliasHasle

사용자가 번들에 "3" 인스턴스와 OrbitControls를 포함하려면 어떻게 해야 합니까?

그런 다음 external 필드는 제외되어야 하며 이 경우 3개의 단일 사본과 궤도 제어가 번들에 포함됩니다. rollup-plugin-node-resolve (모듈 확인을 지원하는 롤업에 필요하며 위의 구성에서 사용됨)는 기본적으로 package.json의 모듈 필드를 사용하도록 설정되어 있습니다( mainFields 옵션 참조). 세 참조를 제어하고 "three"는 동일한 스크립트로 해석됩니다. _ mainFields 가 ["main", "module"] mainFields 로 변경되어 package.json_에서 "module" 대신 "main"이 사용되면 3개의 복사본이 여기에 포함되고 문제가 이전 방식으로 중단됩니다. 앞서 언급한. 그러나 해당 필드를 변경해야 합니다. 그러나 "main"이 사용되면 rollup은 기본적으로 require를 사용하는 commonjs 파일을 처리하는 방법을 모르기 때문에 rollup -plugin-commonjs 도 필요할 수 있습니다.

@그레그만

불행히도 나는 이 경우에 순진한 모듈 교체가 그렇게 쉽게 작동할 것이라고 생각하지 않습니다. 제안된 솔루션 중 어느 것도 이 경우를 다루지 않으며 별도의 호스트에서 핵심 스크립트와 예제를 가져오는 경우를 돕는 데 사용할 수 있는 공식적인 것은 없다고 생각합니다. 가져오기 지도 는 내가 아는 한 이것을 돕기 위해 작업 중인 유일한 것입니다. 예제와 세 개 모두 동일한 호스트에서 가져온 경우 세 개의 복사본 하나만 로드됩니다.

import * as three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.module.js';
import { OrbitControls } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/108/examples/jsm/controls/OrbitControls.js';

// or

import * as three from 'https://threejs.org/build/three.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

사용 사례에 따라 클래식 스크립트 태그를 계속 사용하는 것이 더 나을까요?

@그레그만

모듈을 이렇게 라이브로 사용하려고 하면 비슷한 일이 발생하는지 확실하지 않습니다.

import * as three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

응.. 그런 모듈 쓰지마 😁

응.. 그런 모듈 쓰지마 😁

동의. 문서와 예제는 대부분 경험이 부족한 개발자를 대상으로 하고 있으며 jsm 예제가 기본값이며 빌더 없이는 작동하지 않으며 CDN을 통해 작동하지도 않는다는 사실은 일종의 큰 변화입니다.

이전에는 기본적으로 예제에서 소스를 보고 jsfiddle/codepen 등에 복사하여 붙여넣고 스크립트 태그의 경로를 수정하면 실행될 수 있었습니다. 이제 three.js 사이트에 직접 연결하고 버전이 충돌할 때마다 중단되는 것을 관찰하지 않는 한 모든 예제가 실행되지 않습니다. (예, 비 모듈 예제가 존재한다는 것을 알고 있지만 https://threejs.org/examples에서 링크된 예제가 아닙니다)

@gkjohnson

import * as three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.module.js';
import { OrbitControls } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/108/examples/jsm/controls/OrbitControls.js';

작동하지 않습니다. OrbitControls가 CDN에 없고 OrbitContrls ../../../bulild/three.js 내부의 경로가 작동하도록 하는 올바른 경로가 아닙니다.

// 또는

import * as three from 'https://threejs.org/build/three.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js'

또한 three.js가 새 버전을 푸시할 때마다 중단되므로 작동하지 않습니다.

example/js 폴더를 CDN에 푸시하고 예제 코드에서 URL을 수정하는 것만으로도 여전히 작동하도록 3개를 푸시할 수 있습니까? 이는 three.module.js가 다음 위치에 있어야 함을 의미합니다.

https://cdnjs.cloudflare.com/ajax/libs/three.js/108/build/three.module.js

build 이 경로에 추가됨

옵션을 언급하자면 jsdelivr 또는 unpkg와 같은 다른 CDN은 ES 모듈을 지원합니다.

• https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js
• https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js

이전에는 기본적으로 예제에서 소스를 보고 jsfiddle/codepen 등에 복사하여 붙여넣고 스크립트 태그의 경로를 수정하면 실행될 수 있었습니다...

좋든 나쁘든 그것에 대해 유용한 작업을 수행하려면 가져오기 맵 이 필요하다고 생각합니다.

이제 three.js 사이트에 직접 연결하지 않으면 모든 예제가 실행되지 않습니다.

저는 누구에게도 threejs 사이트의 라이브 스크립트에 직접 링크하도록 권장하지 않습니다... 그건 좋은 생각이 아닙니다. 위의 의견에 따라 버전이 지정된 대안이 있습니다.

이상적으로 이러한 질문에 답하는 문서는 모듈을 통한 가져오기 페이지입니다. 우리가 거기에서 다루어야 할 사례가 있습니까? CDN을 언급하는 것이 좋습니다.

CDN을 언급하는 것이 좋습니다. 또한 Google의 첫 번째 히트작인 Cloudflare CDN은 모듈에 적합하지 않다고 언급했습니다(변경되지 않는 한)

@그레그만

이전에는 기본적으로 예제에서 소스를 보고 jsfiddle/codepen 등에 복사하여 붙여넣고 스크립트 태그의 경로를 수정하면 실행될 수 있었습니다.

난 네 편이야. 모듈의 최악의 부분은 더 이상 예제의 콘솔에서 camera 또는 renderer 액세스할 수 없다는 것입니다 😟

• https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js

unpkg를 사용해 볼까요?

unpkg를 사용해 볼까요?

모듈을 통해 가져오기 페이지와 같은 문서에서 사용하기 시작했습니까? 아니면 프로젝트에서 사용하기 시작했습니까?

모듈의 최악의 부분은 더 이상 예제의 콘솔에서 카메라 또는 렌더러에 액세스할 수 없다는 것입니다.

네, 답답합니다. 나는 로컬에서 개발할 때 이것을 (또는 이와 유사한) 예제에 던졌습니다.

Object.assign( window, { camera, renderer, scene } );

그것이 우리가 개발 도구 확장으로 해결하고자 하는 것이라고 가정합니다.

몇 가지 조사를 취할 것입니다,하지만 우리는 추가 기꺼이 경우 ... 재미있을 수있는 하나 개의 아이디어 수입 맵 polyfill을 나는 우리가 수입을 할 수 있다고 생각, 모든 예제는 100 % 복사 / npm-와 호환이 붙여 사용 및 번들러 기반 워크플로. 예를 들어:

<script defer src="es-module-shims.js"></script>
<script type="importmap-shim" src="importmap.dev.js"></script>

<!-- ... -->

<script type="module-shim">
  import { Scene, WebGLRenderer } from 'three';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

  // ...
</script>

unpkg를 사용해 볼까요?

모듈을 통해 가져오기 페이지와 같은 문서에서 사용하기 시작했습니까? 아니면 프로젝트에서 사용하기 시작했습니까?

https://threejs.org/build/ 를 가리키는 대신 ISSUE_TEMPLATE 에서 해당 링크를 사용하고 있습니다.

그리고 @greggman 아마 전환 할 수 https://cdnjs.cloudflare.com/ajax/libs/three.js/108/ 에 https://unpkg.com/[email protected]/ ?

unpkg가 여기서 논의하는 문제를 해결하는 것처럼 보입니다.

네, 답답합니다. 나는 로컬에서 개발할 때 이것을 (또는 이와 유사한) 예제에 던졌습니다.

Object.assign( window, { camera, renderer, scene } );

으악! ㅋ

그것이 우리가 개발 도구 확장으로 해결하고자 하는 것이라고 가정합니다.

예! 🤞

@그레그만

모듈을 이렇게 라이브로 사용하려고 하면 비슷한 일이 발생하는지 확실하지 않습니다.

import * as three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

응.. 그런 모듈 쓰지마 😁

그래서 오늘은 그냥 하고 있는 나 자신을 발견했다... 😅 정말 나쁜 버릇이지만 문제는 대부분의 일이 잘 되는데 뭔가 고장나면 고치기가 꽤 어렵다는 것입니다.

내 경우에는 내가 수입 된 three.module.js 에서 dev 및 OBJLoader 에서 master . OBJLoader 수입 three.module.js 에서 master 그래서 BufferGeometry 하지 않은 새로운 usage 속성을 , 및 WebGLRenderer 않았다 usage 찾지 못했기 때문에 메쉬를 렌더링하지 않았습니다. 다른 모든 것은 작동했지만 😶

이거 꽤 털털하다...

익숙해질 일만 남은 것 같아요. 이제 이해가 되니까 지금 상태가 괜찮다고 생각합니다.

BTW 저는 threejsfundamentals를 모두 esm 기반으로 업데이트했습니다. 🤞

그래도 three.module.min.js 가 있으면 좋을 것 같습니다(또는 three.min.module.js 😜).

+1

ES6 모듈로 3개의 & 궤도 컨트롤을 가져오고 있습니다. 궤도 컨트롤이 빌드 폴더 내에서 3개를 참조하기 때문에 경로를 파악하는 데 시간이 좀 걸렸습니다.

슈퍼 팬 우리는 3개를 모듈로 사용할 수 있지만 이것에 대해 더 많은 유연성을 갖는 것이 좋을 것입니다. 다른 모듈도 마찬가지라고 가정하고 궤도 제어 파일로 이동하여 엉망이 되기 시작하지 않을 것입니다.

또한 three.min.module.js의 경우 +1 😎

# 18239에서 이동, 나는 수행하여 거기에 비슷한 문제를 잡힌 npm link 다른 패키지 그 사용의 three.js를에.

이 문제를 해결하는 데 도움이 될 수 있는 플러그인 3분할 도구 를 개발했습니다.

나는 같은 문제에 직면 해있다. three.js를 사용하여 React 구성 요소를 작성 중이며 예제에서 일부 모듈을 가져오고 있습니다. 롤업과 함께 번들로 제공되면 번들을 보면 3개에 대한 1개의 import 문이 있고 그 다음 Three.js 코드가 있음을 알 수 있습니다.

내 구성 요소에서 이 import 문을 사용하는 경우: import * as THREE from "three/build/three.module"
일이 제대로 작동하지만 Three가 번들에 포함되어 있는데, 이는 내가 원하지 않는 것입니다.
3개에 대한 수입 명세서를 갖고 싶습니다. import * as THREE from "three 를 사용하면 번들에 3개를 모듈로 가져오지만 예제 중 하나를 사용하자마자 three.js가 번들에 추가됩니다. 그런 다음 3)의 코드로 인해 궁극적으로 내 코드가 손상됩니다.

@chabb

three.js를 사용하여 React 구성 요소를 작성 중이며 예제에서 일부 모듈을 가져오고 있습니다. 롤업과 함께 번들로 제공되면 번들을 보면 3개에 대한 1개의 import 문이 있고 그 다음 Three.js 코드가 있음을 알 수 있습니다.

여기에 게시된 솔루션이 문제를 해결해야 합니다: https://github.com/mrdoob/three.js/issues/17482#issuecomment -530957570.

나는 이러한 문제의 대부분이 그들의 번들러(이해할 수 있음)에서 무슨 일이 일어나고 있는지 완전히 이해하지 못하는 사람들로부터 파생된다고 생각하지만 이러한 문제는 세 가지에만 국한되지 않습니다. 그러나 실수로 3개의 코어를 이중으로 가져오는 것이 다른 라이브러리보다 더 눈에 띌 가능성이 있습니다. lodash, 반응 구성 요소 또는 OrbitControls와 같은 외부용 종속성을 번들링하는 것은 더 쉽게 놓칠 수 있습니다.

외부 패키지에 따라 Rollup은 이 동작을 문서화하고 여기 에 옵션을 제공하며 Webpack은 여기에 유사한 옵션을 제공

번들러의 경우 아마도 답은 문서화하거나 문제 해결 가이드를 추가하거나 모듈을 통해 가져오기 페이지 에서 공통 번들러를 구성하는 방법에 대한 링크일 것입니다.

examples/jsm 패키지가 이 패턴을 변경할 수 있다면...

// <strong i="7">@file</strong> GLTFLoader.js

// Before
import { Mesh } from '../../build/three.module.js';

// After
import { Mesh } from 'three';

... 이러한 문제는 훨씬 쉽게 해결할 수 있습니다. 불행히도 복잡한 빌드 설정 없이 threejs 웹 사이트 내에서 HTML 예제를 관리하는 방법을 모르겠습니다. threejs 웹사이트의 가져오기 맵 폴리필로 해결할 수 있지만 확실하지 않습니다. :/

예제 파일이 대신 "3"을 참조하는 경우 핵심 라이브러리가 번들로 제공되지 않는 동안 여전히 예제 코드의 중복 번들을 얻게 됩니다...

나는 이것을 잘 따르지 않는다. 상대 경로 가져오기 때문에? 패키지 기준으로 만들 수 있습니다.

@donmccurdy

나는 examples/jsm 패키지가 이 패턴을 변경할 수 있다면 이러한 문제를 해결하기가 훨씬 쉬울 것이라는 직감이 있습니다.

이렇게 하면 문제가 해결된 것처럼 보이지만 사람들은 여전히 ​​중복된 코드를 갖고 있을 것입니다. 이는 응용 프로그램이 중단되지 않기 때문입니다.

나는 이것을 잘 따르지 않는다. 상대 경로 가져오기 때문에? 패키지 기준으로 만들 수 있습니다.

내가 명확하지 않다면 죄송합니다. 이것은 설명하기가 조금 어렵다고 생각합니다. 바라건대 이것은 조금 더 명확합니다. 롤업 케이스를 사용하겠습니다.

사람들이 three 가 외부로 표시된 패키지를 롤업하려는 위의 경우 나는 그들이 three.js가 다른 애플리케이션이 의존할 수 있는 피어 종속성이 되는 라이브러리를 구축하고 있다고 가정합니다.

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { stuff } from './local/src/index.js';

// library code with exports...

여기서 목표는 위의 three.js 가져오기를 라이브러리에 유지하고 번들이 3개와 OrbitControls를 피어 종속성으로 로드하는 것이므로 애플리케이션이 three.js와 OrbitControls도 사용하는 경우 두 번 가져오지 않습니다.

사람들은 external: [ 'three' ] 옵션이 이 동작을 달성하기를 기대하지만(저는 확실히 그랬습니다) 문자열이 OrbitControls 가져오기 경로와 일치하지 않기 때문에 그렇지 않습니다. 그 결과 OrbitControls 가 의도치 않게 번들되어 ../../../build/three.module.js 도 함께 번들됩니다(문자열과 일치하지 않기 때문에). 사람들이 번들로 제공되는 three.js 핵심 파일을 가리키는 이유는 애플리케이션 중단, 라이브러리 번들이 훨씬 더 큰 등의 훨씬 더 눈에 띄기 때문입니다. 여기서 현실은 _OrbitControls 파일이 번들로 제공되어서는 안 된다는 것입니다. 첫 번째 장소._ 여기서 Rollup을 구성하는 올바른 방법은 옵션을 external: path => /^three/.test( path ) 로 설정하는 것입니다.

이는 3명에게만 국한된 것이 아니다. Rollup 은 문서에서 사용 하지만 'lodash/merge' 가 라이브러리 코드에 번들로 포함되어 있는지 확인하기 어렵거나 불가능할 것입니다. 너무 작아서 중복 가져오기 버그를 일으키지 않기 때문입니다. 머티리얼 UI 는 가져오기에서 중첩된 파일 참조를 권장하며 마찬가지로 external: ['@material-ui/core'] 설정은 번들에서 '@material-ui/core/Button' 를 제외하지 못합니다.

이러한 사용 사례에 대한 예제 코드를 변경하는 것은 가치가 있다고 생각하지 않습니다. 번들러가 올바르게 구성되어 있으면 존재하지 않을 중복 코드가 계속 생성되기 때문입니다.

여기에 두 가지 경우가 있습니다.

(1) 사용자는 threejs와 예제가 한 번 포함되기를 원하고 무언가를 두 번 얻습니다.

예를 들어 애플리케이션을 빌드하는 동안.

(2) 사용자는 threejs와 예제가 0번 포함되기를 원하고 1번 이상 무언가를 얻습니다.

예를 들어 외부 또는 피어 종속성으로 3개가 있는 라이브러리를 빌드하는 동안.

내가 아는 한 (1)과 (2)는 여전히 걸려 넘어지기 쉬운 문제입니까? 위의 접근 방식으로 (1)이 해결되면 그것만으로도 도움이 됩니다. (2)는 잘 모르겠습니다. 아마도 /^three/.test( path ) 트릭이 모듈을 통한 가져오기에 언급되어야 합니까?

@gkjohnson 설명 감사합니다. 내 생각을 명확히하는 데 정말 도움이되었습니다.

내 롤업 구성에서 external 이런 식으로 정의했습니다.

[
        ...Object.keys(pkg.dependencies || {}),
        ...Object.keys(pkg.peerDependencies || {}),
        ...other_stuff
      ]

세 가지가 외부 종속성으로 취급되므로 작동할 것이라고 생각했습니다. 그러나 당신이 언급했듯이 정규식을 사용해야합니다 (내가 이해하는 한 예가 수행하기 때문인 것 같습니다.
import from "../../../build/three.module.js"; ). 그래서 나는 끝내었다.

external: p => {
      if ([
        ...Object.keys(pkg.dependencies || {}),
        ...Object.keys(pkg.peerDependencies || {}),
        'prop-types'
      ].indexOf(p) > -1) {
        return true;
      }
      return /^three/.test(p) ;
    }

약간 관련이 없는 질문이지만 package.json 에서 선언한 모든 종속성이 번들의 일부가 아닐 것으로 예상됩니다. 올바른 가정입니까?

@donmccurdy

내가 아는 한 (1)과 (2)는 여전히 걸려 넘어지기 쉬운 문제입니까?

제 생각에 (2)는 번들러를 잘못 구성한 결과이며 아마도 번들러에 대한 몇 가지 제안으로 문서를 업데이트하여 해결할 수 있습니다. (1) 문제 (2)로 고통받는 패키지를 사용한 결과 발생할 수 있지만 그 외에는 (1)이 걸려 넘어지기 쉽습니다. 누군가가 자신의 번들러를 구성한 방법을 확인하기 위해 문제를 보여주는 실제 사용 사례를 보고 싶지만 여기에 (지금까지) 할 수 있는 방법의 목록이 있습니다.

1. 'three/src/Three.js' 또는 'three/build/three.min.js' 에서 명시적으로 가져옵니다(문서에서는 권장하지 않음).
2. 해결할 때 package.module 필드가 아닌 package.main 필드를 사용하도록 번들러를 재구성하십시오. 그러나 세 가지 큰 번들러인 Rollup , Webpack 및 Parcel은 모두 기본적으로 main 보다 module 를 선호합니다. 이 사용 사례는 드물지만 가정일 뿐입니다.
3. npm link 를 사용하여 세 가지에 의존하는 심볼릭 링크된 패키지를 포함합니다(롤업의 preserveSymlinks 옵션을 사용하여 수정됨).
4. 플랫폼 은 모듈보다 기본 필드를 우선시하기 때문에 codeandbox.io 에서 세 가지와 예제를 사용하십시오.

사람들이 나무 흔들기를 위해 1을 하고 있다는 것을 알고 있지만 숫자 4는 쉽게 걸려 넘어질 수 있는 유일한 것 같습니다. 다른 사람들은 자신이 통제할 수 없거나 매우 드물다고 느낍니다.

@chabb

내가 이해하는 한, 예제가 import from "../../../build/three.module.js"; 하고 있기 때문인 것 같습니다 ...

이것은 내가 설명한 내용이 아닙니다: https://github.com/mrdoob/three.js/issues/17482#issuecomment -583694493. /^three 는 'three/examples/jsm/controls/OrbitControls.js' 문자열과 일치하기 때문에 작동합니다. 'three' 문자열은 그렇지 않은 반면 three.js 라이브러리의 일부이기 때문에 외부여야 합니다. 다른 종속성에서도 동일한 일이 발생할 수 있습니다. 다른 알 수 없는 함정을 피하거나 베어 모듈 지정자가 있는 패키지와 일치시키기 위해 모든 종속성에 대해 정규식을 사용하는 것이 좋습니다.

@gkjohnson 자세한 설명 감사합니다. 이해가 됩니다.

이것은 결국 이 스레드의 문제를 해결하지 못하는 것처럼 들리지만 스레드에서 이미 몇 번 언급했기 때문에 마침내 가져오기 맵 폴리필을 테스트했습니다. https://github.com/KhronosGroup/ KTX-Software/pull/172/files. 해당 폴리필을 사용하면 웹 브라우저에서 import * as THREE from 'three'; 작동합니다.

브라우저만 약간의 자신감을 보였다면...
https://github.com/WICG/import-maps/issues/212#issuecomment -663564421

내 프로젝트 중 하나에 통과 하위 클래스를 추가할 때 동일한 문제가 발생했습니다.

import { /* stuff */ } from 'three'
import { Pass } from 'three/examples/jsm/postprocessing/Pass.js'

그리고 내 모듈에서 패스 코드를 복사하는 것을 선호했기 때문에 나중에 브라우저의 three.js에서 가져올 필요가 없도록 해결 방법을 찾았습니다.

const threeModulePath = path.resolve( __dirname, 'node_modules/three/build/three.module.js' );

export default {
    /* ..... */
    external: [ 'three' ],
    output: [
        {
            /* .... */
            globals : {
                'three': 'THREE',
                [ threeModulePath ]: 'THREE',
            }
        }
    ]
};

이렇게 하면 브라우저에서 작동하고 모듈 가져오기도 작동해야 합니다.

편집 :

로컬 3개 프로젝트(아래 예 참조)에서 로드하면 이 접근 방식이 중단되고 몇 가지 추가 해결 방법이 필요합니다.

"dependencies" : {
    "three": "file:../three.js"
}

글쎄, 나는 계속해서 로컬 링크를 지원하는 새 버전을 만들었습니다.

const threeName = "three"; // Change with your three package name
const dependencies = require('./package.json').dependencies;
const splits = dependencies[threeName].split('file:');

const modulePath = (splits.length > 1) ?
    path.resolve(__dirname, splits[1], 'build/three.module.js'):                  // Resolve local path
    path.resolve(__dirname, 'node_modules', threeName, 'build/three.module.js');  // Resolve node_module path

const external = [
    threeName,
    modulePath,
]

const globals = {
    [threeName]: 'THREE',
    [modulePath]: 'THREE',
}

@Mcgode 위의 https://github.com/mrdoob/three.js/issues/17482#issuecomment -530957570에서 해결되었습니다. 롤업을 사용 중이고 예제 모듈을 사용할 때 three.js를 외부로 표시하려면 제안된 대로 다음을 수행해야 합니다.

externals: p => /^three/.test(p),

구성을 그렇게 복잡하게 만들 이유가 없습니다. 이렇게 하면 Pass.js 파일과 three.js 모듈이 모두 externel로 표시됩니다.

@gkjohnson 예제 가 아닌 three lib만 외부로 표시되기를 원하기 때문에 내 사용 사례는 정확히 동일하지 않습니다(내 빌드와 함께 예제가 번들되기를 원합니다).

외부로 3개를 사용하여 라이브러리를 빌드 중입니다. 예제를 번들로 빌드하지만 3개는 사용하지 않고 싶습니다. 위에서 설명한 것처럼 예제에서 모듈을 가져올 때 출력에는 3의 코드가 포함됩니다. webpack으로 달성할 수 있습니까?

import {  } from "three";
import { Line2 } from "three/examples/jsm/lines/Line2";
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";

@Mcgode @recardinal 가능하지 않다고 생각합니다. 나는 똑같이 하고 싶었기 때문에 예제에서 코드를 복사/붙여넣기만 했습니다. 제 경우에는 수입과 수출을 '조정'해야 했고 그게 전부였습니다. 분명히 이것은 이상적이지는 않지만 제 사용 사례에는 충분했습니다.

Webpack과 THREE를 외부로 사용하는 유사한 사용 사례가 있습니다. 다음 가져오기로 인해 three.module.js가 번들 출력에 포함됩니다.

import * as THREE from 'three';
import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

나는 examples/js/*가 어느 시점에서 제거될 것이라는 것을 읽었습니다. 그 전에 jsm 예제가 "그냥 작동"하면 좋을 것입니다.