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 से संबंधित है - प्रस्तावित समाधानों में से एक main फ़ील्ड को मॉड्यूल बिल्ड पथ के साथ package.json बदलना था लेकिन यह इस उपयोग के मामले को ठीक नहीं करेगा।

यहाँ समस्या को स्पष्ट करने के लिए यह है कि three को एक अलग पैकेज बनाने के लिए बाहरी के रूप में चिह्नित किया जा रहा है जो रोलअप कॉन्फ़िगरेशन में तीन पर निर्भर है जो ../../../build/three.module.js के कठिन संदर्भ को नहीं पकड़ता है और इसे निर्माण में शामिल करता है। उदाहरण के लिए निम्न फ़ाइल का निर्माण अनजाने में बंडल में OrbitControls कोड _and_ तीनjs कोड शामिल करेगा, साथ ही @adrian-delgado के पोस्ट किए गए कॉन्फ़िगरेशन के साथ निर्मित होने पर तीन की एक और प्रति आयात करेगा।

// 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),

    // ...
};

मेरा मतलब इसे दीर्घकालिक या सर्वोत्तम समाधान के रूप में प्रस्तावित करने का नहीं है, लेकिन ऑर्बिटकंट्रोल (और तीन फ़ोल्डर में सभी फाइलों) को बाहरी के रूप में चिह्नित करने के लिए कॉन्फ़िगरेशन को बदलना दोनों मामलों में इसे हल करेगा:

किसी कारण से मुझे उम्मीद थी कि रोलअप '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);

यह काम करेगा, लेकिन यह संभव नहीं है, क्योंकि कोई भी अन्य lib या कोड का टुकड़ा जो तीन पर निर्भर है, "तीन" से आयात करेगा और फिर यह फिर से टूट जाएगा। Package.json आम तौर पर पर्यावरण को बताता है कि कैसे हल किया जाए, "बिल्ड/थ्री.मॉड्यूल" एक वितरण विवरण है जो लीक नहीं होना चाहिए। जब संकल्प छोड़ दिया जाता है जो केवल नामस्थान समस्याओं को आमंत्रित करता है।

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

@gkjohnson क्या होगा यदि उपयोगकर्ता बंडल में "तीन" उदाहरण और 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';

तीन.js को दो बार लोड करता है, एक बार सीडीएन से और फिर तीनjs.org . से

हो सकता है कि तीन के साथ मॉड्यूल का उपयोग करने का तरीका ऐसा नहीं है, लेकिन 106 से पहले जाने पर ऐसी कई साइटें और उदाहरण हैं जो ऐसा करते हैं

<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>

सभी उदाहरण बिल्डिंग (बंडलिंग) के बजाय लाइव मॉड्यूल का उपयोग दिखाते हैं, इसलिए एक अर्थ में वे तीन.जेएस का उपयोग करने का वास्तविक तरीका नहीं दिखा रहे हैं जैसे वे करते थे। दूसरे शब्दों में, पुराने उदाहरणों ने बॉक्स से बाहर काम किया। नए उदाहरण AFAIK नहीं हैं। उदाहरण के लिए काम करने के लिए आपको जावास्क्रिप्ट को उदाहरण से निकालने और एक अलग .js फ़ाइल में डालने की आवश्यकता होगी, फिर स्थानीय रूप से तीन.js डालें (शायद npm के माध्यम से)। उदाहरणों में सभी पथों को ठीक करें ताकि वे पैकेज आधारित पथ हों (नहीं ../.././build), और अंत में रोलअप का उपयोग करें

गैर-मॉड्यूल संस्करणों से यह बहुत बड़ा बदलाव है जिसके लिए केवल पथ बदलना पर्याप्त था

@mrdoob

@adrian-delgado के मूल कॉन्फ़िगरेशन के साथ तीन.js को एक बार शामिल किया जाएगा और कक्षा नियंत्रणों को एक बार शामिल किया जाएगा और कोई भी पैकेज बाहरी के रूप में चिह्नित नहीं किया जाएगा। मेरे द्वारा प्रस्तावित कॉन्फ़िगरेशन के साथ उत्पादित बंडल में three/build/three.module.js और three/examples/jsm/controls/OrbitControls.js पर बाहरी निर्भरता होगी।

@EliasHasle

क्या होगा यदि उपयोगकर्ता बंडल में "तीन" उदाहरण और OrbitControls शामिल करना चाहता है?

फिर external फ़ील्ड को बाहर रखा जाना चाहिए जिस स्थिति में बंडल में तीन और कक्षा नियंत्रणों की एक प्रति शामिल की जाएगी। रोलअप-प्लगइन-नोड- रिज़ॉल्यूशन (जो मॉड्यूल रिज़ॉल्यूशन का समर्थन करने के लिए रोलअप के लिए आवश्यक है और उपरोक्त कॉन्फ़िगरेशन में उपयोग किया जा रहा है) पैकेज के मॉड्यूल फ़ील्ड का उपयोग करने के लिए डिफ़ॉल्ट है। जेसन ( mainFields विकल्प देखें) ताकि कक्षा तीन संदर्भों को नियंत्रित करता है और "तीन" एक ही स्क्रिप्ट को हल करेगा। _अगर mainFields को ["main", "module"] mainFields में बदल दिया जाता है तो package.json_ में "मॉड्यूल" के बजाय "मुख्य" का उपयोग किया जाता है, फिर तीन की दो प्रतियां यहां शामिल की जाएंगी और चीजें उस तरह से टूट जाएंगी पहले उल्लेख किया है। हालाँकि इसके लिए उस क्षेत्र को बदलने की आवश्यकता है। यदि "मुख्य" का उपयोग किया जाता है, हालांकि, रोलअप-प्लगइन-कॉमनज की भी आवश्यकता होगी, क्योंकि रोलअप को पता नहीं है कि सामान्य फाइलों को कैसे संसाधित किया जाए जो डिफ़ॉल्ट रूप से आवश्यकता का उपयोग करते हैं।

@ ग्रेगमैन

दुर्भाग्य से मुझे नहीं लगता कि इस मामले में मॉड्यूल का एक निष्पक्ष प्रतिस्थापन इतनी आसानी से काम करेगा। प्रस्तावित समाधानों में से कोई भी इस मामले को संबोधित नहीं करेगा और मुझे नहीं लगता कि इस समय कुछ भी आधिकारिक है जिसका उपयोग अलग मेजबानों से कोर स्क्रिप्ट और उदाहरण आयात करने के मामले में मदद के लिए किया जा सकता है। जहां तक ​​​​मुझे पता है, आयात मानचित्र ही एकमात्र ऐसी चीज है जो इसमें मदद करने के लिए काम कर रही है। यदि दोनों उदाहरण और तीन एक ही होस्ट से आयात किए जाते हैं तो तीन की केवल एक प्रति लोड की जाएगी:

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

हाँ... उस तरह के मॉड्यूल का उपयोग न करें

हाँ... उस तरह के मॉड्यूल का उपयोग न करें

माना। यह सिर्फ यकीनन है कि डॉक्स और उदाहरण ज्यादातर अनुभवहीन डेवलपर्स को लक्षित कर रहे हैं और यह तथ्य कि जेएसएम उदाहरण डिफ़ॉल्ट हैं और उनमें से कोई भी बिल्डर के बिना काम नहीं करेगा और न ही वे किसी भी सीडीएन के माध्यम से काम करेंगे, यह एक तरह का बड़ा बदलाव है।

ऐसा हुआ करता था कि आप मूल रूप से एक उदाहरण पर स्रोत देख सकते हैं, कॉपी और पेस्ट को jsfiddle/codepen आदि में पेस्ट कर सकते हैं, स्क्रिप्ट टैग में पथ ठीक कर सकते हैं और यह चल जाएगा। अब हालांकि सभी उदाहरण तब तक नहीं चलेंगे जब तक आप सीधे तीन.जेएस साइट से लिंक नहीं करते हैं और हर बार संस्करण के टकराने पर उन्हें टूटते हुए नहीं देखते हैं। (हाँ, मुझे पता है कि गैर मॉड्यूल उदाहरण मौजूद हैं, लेकिन वे 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'

यह भी काम नहीं करता है क्योंकि यह हर बार तीन बार टूट जाएगा। जेएस एक नया संस्करण धक्का देता है

हो सकता है कि उदाहरण/जेएस फ़ोल्डर को सीडीएन में धक्का दें और तीन ऐसे कि उदाहरण कोड में यूआरएल को ठीक करना अभी भी काम करेगा? इसका मतलब है कि तीन.मॉड्यूल.जेएस पर होना चाहिए

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

build पथ में जोड़ा गया

विकल्पों का उल्लेख करने के लिए, अन्य सीडीएन जैसे jsdelivr या unpkg 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 आदि में पेस्ट कर सकते हैं, स्क्रिप्ट टैग में पथ ठीक कर सकते हैं और यह चलेगा ...

मुझे लगता है कि हमें इसके बारे में कुछ भी उपयोगी करने के लिए बेहतर या बदतर के लिए आयात मानचित्रों की आवश्यकता होगी।

अब हालांकि सभी उदाहरण तब तक नहीं चलेंगे जब तक आप सीधे तीन.js साइट से लिंक नहीं करते हैं

मैं वास्तव में किसी को भी थ्रीजे साइट पर लाइव स्क्रिप्ट से सीधे लिंक करने के लिए प्रोत्साहित नहीं करूंगा ... यह कभी भी एक अच्छा विचार नहीं होगा। ऊपर दिए गए प्रति टिप्पणी के अनुसार संस्करण विकल्प हैं।

आदर्श रूप से, इन प्रश्नों का उत्तर देने वाला दस्तावेज़ मॉड्यूल पृष्ठ के

सीडीएन का उल्लेख करना एक अच्छा विचार होगा। यह भी उल्लेख करते हुए कि क्लाउडफ्लेयर सीडीएन, Google पर पहली हिट, मॉड्यूल के लिए अच्छा नहीं है (जब तक कि वह बदल न जाए)

@ ग्रेगमैन

ऐसा हुआ करता था कि आप मूल रूप से एक उदाहरण पर स्रोत देख सकते हैं, कॉपी और पेस्ट को jsfiddle/codepen आदि में पेस्ट कर सकते हैं, स्क्रिप्ट टैग में पथ ठीक कर सकते हैं और यह चल जाएगा।

मैं तुम्हारी तरफ़ हूं। मॉड्यूल का सबसे खराब हिस्सा यह है कि अब आप उदाहरणों में कंसोल से camera या renderer तक नहीं पहुंच सकते हैं

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

कैसे के बारे में हम unpkg का उपयोग शुरू करते हैं?

कैसे के बारे में हम unpkg का उपयोग शुरू करते हैं?

क्या आपका मतलब है कि इसे मॉड्यूल पेज के

मॉड्यूल का सबसे खराब हिस्सा यह है कि अब आप उदाहरणों में कंसोल से कैमरा या रेंडरर तक नहीं पहुंच सकते हैं

हाँ, यह निराशाजनक है। स्थानीय रूप से विकसित करते समय मैं इसे (या समान) उदाहरणों में फेंक रहा हूं:

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

मुझे लगता है कि ऐसा कुछ है जिसे हम एक देव उपकरण एक्सटेंशन के साथ हल करने की उम्मीद करते हैं?

एक विचार जो कुछ जांच करेगा, लेकिन दिलचस्प हो सकता है ... अगर हम सभी उदाहरणों में एक आयात नक्शा पॉलीफिल जोड़ने के इच्छुक हैं, तो मुझे लगता है कि हम वहां इस्तेमाल किए गए आयात को 100% कॉपी/पेस्ट एनपीएम के साथ संगत कर सकते हैं- और बंडलर-आधारित कार्यप्रवाह। उदाहरण के लिए:

<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 I ने तीनjsfundamentals को सभी esm आधारित होने के लिए अपडेट किया है इसलिए

ऐसा लगता है कि three.module.min.js होना अच्छा हो सकता है (या वह three.min.module.js )

+1

मैं सिर्फ ES6 मॉड्यूल के रूप में तीन और कक्षा नियंत्रण आयात कर रहा हूं और क्योंकि (ऐसा प्रतीत होता है) कक्षा नियंत्रण बिल्ड फ़ोल्डर के भीतर तीन को संदर्भित करता है, मुझे अपने पथों का पता लगाने में थोड़ा समय लगा

सुपर फैन हम मॉड्यूल के रूप में तीन का उपयोग कर सकते हैं, लेकिन इसके चारों ओर अधिक लचीलापन होना अच्छा होगा, मैं कक्षा नियंत्रण फ़ाइल में नहीं जा रहा हूं और गड़बड़ करना शुरू कर दूंगा, यह मानते हुए कि यह अन्य मॉड्यूल के मामले में भी है।

तीन.min.module.js . के लिए भी +1

# 18,239 से बढ़ रहा है, मैं ऐसा करके एक ऐसी ही समस्या उस में पकड़ा गया npm link एक और पैकेज का उपयोग करता है Three.js पर।

मैंने एक प्लगइन थ्री-मिनिफायर विकसित किया है जो इस समस्या को हल करने में मदद कर सकता है।

मैं एक ही मुद्दे का सामना कर रहा हूँ। मैं तीन.जेएस का उपयोग करके एक प्रतिक्रिया घटक लिख रहा हूं, और मैं उदाहरणों से कुछ मॉड्यूल आयात कर रहा हूं। एक बार जब यह रोलअप के साथ बंडल हो जाता है, अगर मैं बंडल को देखता हूं, तो मैं देख सकता हूं कि तीन के लिए एक आयात विवरण है, और फिर तीन.जेएस कोड है।

अगर मैं अपने घटक में इस आयात विवरण का उपयोग करता हूं: import * as THREE from "three/build/three.module"
चीजें सही ढंग से काम करती हैं लेकिन तीन को फिर बंडल में एम्बेड किया जाता है, जो कि कुछ ऐसा है जो मुझे नहीं चाहिए।
मैं तीन के लिए एक आयात विवरण रखना चाहता हूं। अगर मैं import * as THREE from "three उपयोग करता हूं, तो बंडल में मॉड्यूल के रूप में तीन आयात किए जाएंगे, लेकिन जैसे ही मैं उदाहरणों में से एक का उपयोग करता हूं, तो बंडल में तीन.जेएस जोड़ा जाता है (= मेरे पास तीन के लिए एक आयात विवरण है, और फिर तीन का कोड), जो अंततः मेरे कोड को तोड़ने का कारण बनता है

@चब्ब

मैं तीन.जेएस का उपयोग करके एक प्रतिक्रिया घटक लिख रहा हूं, और मैं उदाहरणों से कुछ मॉड्यूल आयात कर रहा हूं। एक बार जब यह रोलअप के साथ बंडल हो जाता है, अगर मैं बंडल को देखता हूं, तो मैं देख सकता हूं कि तीन के लिए एक आयात विवरण है, और फिर तीन.जेएस कोड है।

यहां पोस्ट किया गया समाधान आपकी समस्या का समाधान करना चाहिए: https://github.com/mrdoob/three.js/issues/17482#issuecomment -530957570।

मुझे लगता है कि इन मुद्दों में से बहुत से लोग पूरी तरह से समझ नहीं पा रहे हैं कि उनके बंडलर के साथ क्या हो रहा है (जो समझ में आता है) लेकिन ये समस्याएं तीन के लिए अद्वितीय नहीं हैं। यह संभव है, हालांकि, गलती से तीन कोर आयात करना अन्य पुस्तकालयों की तुलना में अधिक ध्यान देने योग्य है। एक निर्भरता को बंडल करना जिसका उद्देश्य बाहरी होना है, जैसे कि लॉश, एक प्रतिक्रिया घटक, या ऑर्बिटकंट्रोल को आसानी से याद किया जा सकता है।

बाहरी पैकेज के आधार पर रोलअप इस व्यवहार को दस्तावेज करता है और है और वेबपैक के पास एक समान विकल्प है । इस मामले में यदि उदाहरण फ़ाइलों को "तीन" के रूप में संदर्भित किया जाता है, तो कोर लाइब्रेरी को बंडल नहीं किया जाएगा, फिर भी आपको उदाहरण कोड के डुप्लिकेट बंडल मिलेंगे जो कि यह स्वयं की समस्या है। और मुझे नहीं लगता कि यह परियोजना कुछ भी कर सकती है जो एक बंडलर को npm लिंक नुकसान की व्याख्या करने में मदद कर सकती है। मुझे लगता है कि एकमात्र समस्याग्रस्त मामला मैंने देखा है कि मुझे लगता है कि गलत कॉन्फ़िगर किए गए बंडलर का परिणाम कोडैंडबॉक्स केस नहीं है।

बंडलर मामलों के लिए शायद उत्तर दस्तावेज़ का है, एक समस्या निवारण मार्गदर्शिका जोड़ें, या मॉड्यूल पृष्ठ के माध्यम से आयात करने पर सामान्य बंडलर को कॉन्फ़िगर करने के तरीके से लिंक करें।

मेरे पास एक कूबड़ है कि अगर examples/jsm पैकेज इस पैटर्न को बदल सकते हैं ...

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

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

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

... इन मुद्दों को हल करना बहुत आसान होगा। दुर्भाग्य से, मुझे नहीं पता कि हम एक जटिल बिल्ड सेटअप के बिना थ्रीजेएस वेबसाइट के भीतर HTML उदाहरणों का प्रबंधन कैसे करेंगे। थ्रीजेएस वेबसाइट पर एक आयात नक्शा पॉलीफिल इसे हल कर सकता है, लेकिन मुझे यकीन नहीं है। :/

यदि उदाहरण फ़ाइलों को "तीन" के रूप में संदर्भित किया जाता है, तो कोर लाइब्रेरी को बंडल नहीं किया जाएगा, फिर भी आपको उदाहरण कोड के डुप्लिकेट बंडल मिलेंगे ...

मैं इसका बिल्कुल पालन नहीं करता। क्योंकि वे सापेक्ष पथ आयात कर रहे हैं? हम उन्हें पैकेज-रिलेटिव बना सकते हैं।

@donmccurdy

मेरे पास एक झुकाव है कि यदि उदाहरण/जेएसएम पैकेज इस पैटर्न को बदल सकते हैं ... इन मुद्दों को हल करना बहुत आसान होगा।

मुझे लगता है कि इससे यह हल हो जाएगा लेकिन लोगों के पास अभी भी डुप्लीकेट कोड होगा जो नोटिस करना मुश्किल है क्योंकि यह एप्लिकेशन को तोड़ने का कारण नहीं बनता है।

मैं इसका बिल्कुल पालन नहीं करता। क्योंकि वे सापेक्ष पथ आयात कर रहे हैं? हम उन्हें पैकेज-रिलेटिव बना सकते हैं।

क्षमा करें अगर मैं अस्पष्ट हूं तो मुझे लगता है कि यह समझाना थोड़ा मुश्किल है - उम्मीद है कि यह थोड़ा और स्पष्ट है। मैं रोलअप केस का उपयोग करूंगा:

ऊपर के मामलों में जहां लोग बाहरी के रूप में चिह्नित three के साथ एक पैकेज रोलअप करना चाहते हैं, मुझे लगता है कि वे एक पुस्तकालय का निर्माण कर रहे हैं जहां तीन.जेएस एक सहकर्मी निर्भरता होगी जिस पर कोई अन्य एप्लिकेशन भरोसा कर सकता है:

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...

यहां लक्ष्य यह होगा कि उपरोक्त तीन.js आयात पुस्तकालय में बने रहें और बंडल तीन और OrbitControls को पीयर निर्भरता के रूप में लोड करें ताकि यदि एप्लिकेशन तीन.js और OrbitControls का भी उपयोग करता है तो आप दो बार आयात नहीं करते हैं।

लोग उनके लिए इस व्यवहार को प्राप्त करने के लिए विकल्प external: [ 'three' ] अपेक्षा करते हैं (मैंने निश्चित रूप से किया) लेकिन ऐसा इसलिए नहीं है क्योंकि स्ट्रिंग OrbitControls आयात पथ से मेल नहीं खाती है। इसके परिणामस्वरूप OrbitControls को अनजाने में बंडल किया जा रहा है और इसलिए ../../../build/three.module.js को बंडल किया जा रहा है, साथ ही (क्योंकि यह स्ट्रिंग से मेल नहीं खाता है)। मुझे लगता है कि लोग थ्री.जेएस कोर फाइल को बंडल करने की ओर इशारा करते हैं क्योंकि यह बहुत अधिक ध्यान देने योग्य है - एप्लिकेशन टूटते हैं, लाइब्रेरी बंडल बहुत बड़ा है, आदि - जहां वास्तविकता यह है कि _the OrbitControls फ़ाइल को बंडल नहीं किया जाना चाहिए था पहला स्थान._ यहां रोलअप को कॉन्फ़िगर करने का सही तरीका विकल्प को external: path => /^three/.test( path ) ।

यह तीन के लिए अद्वितीय नहीं है। रोलअप अपने डॉक्स में एक उदाहरण के रूप में लॉश का उपयोग करता है लेकिन यह नोटिस करना कठिन/असंभव होगा कि क्या 'lodash/merge' आपके लाइब्रेरी कोड में बंडल हो जाता है क्योंकि यह बहुत छोटा है और डुप्लिकेट आयात बग का कारण नहीं बनता है। सामग्री UI आयात में नेस्टेड फ़ाइल संदर्भों को प्रोत्साहित करती है और इसी तरह सेटिंग external: ['@material-ui/core'] बंडल से '@material-ui/core/Button' को बाहर करने में विफल होगी।

मुझे नहीं लगता कि इन उपयोग मामलों के लिए उदाहरण कोड को बदलना उचित है क्योंकि इसके परिणामस्वरूप डुप्लिकेट कोड होगा जो बंडलर को ठीक से कॉन्फ़िगर किए जाने पर वहां नहीं होगा।

यहां दो मामले:

(१) उपयोगकर्ता तीनj चाहता है और उदाहरण एक बार शामिल हैं, दो बार कुछ मिलता है

उदाहरण के लिए एक आवेदन का निर्माण करते समय।

(२) उपयोगकर्ता तीनj चाहता है और उदाहरणों में शून्य बार शामिल है, कुछ १+ बार मिलता है

उदाहरण के लिए बाहरी या सहकर्मी निर्भरता के रूप में तीन के साथ पुस्तकालय का निर्माण करते समय।

जहां तक ​​​​मुझे पता है कि (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 फ़ील्ड का उपयोग करने के लिए अपने बंडलर को पुन: कॉन्फ़िगर करें। तीन बड़ी bundlers रोलअप , Webpack , और पार्सल सब पसंद करते हैं module से अधिक main डिफ़ॉल्ट रूप से हालांकि,। यह उपयोग मामला ऐसा लगता है कि यह असामान्य होगा लेकिन यह सिर्फ एक धारणा है।
3. एक सिम्लिंक्ड पैकेज शामिल करने के लिए npm link का उपयोग करें जो तीन पर निर्भर करता है (यह रोलअप के preserveSymlinks विकल्प का उपयोग करके तय किया गया है)
4. codesandbox.io में तीन और उदाहरणों का उपयोग करें क्योंकि मंच मॉड्यूल पर मुख्य क्षेत्र को प्राथमिकता

नंबर 4 ऐसा लगता है कि केवल एक ही है जिस पर आसानी से ठोकर खाई जा सकती है, हालांकि मुझे पता है कि लोग पेड़ को हिलाने के लिए 1 कर रहे हैं। दूसरों को लगता है कि वे हमारे नियंत्रण से बाहर हैं या बहुत ही असामान्य होंगे।

@चब्ब

जहां तक ​​​​मैं समझता हूं, मुझे लगता है कि ऐसा इसलिए है क्योंकि उदाहरण import from "../../../build/three.module.js"; कर रहे हैं ...

ऐसा नहीं है कृपया जो मैंने यहाँ समझाया है उसे पढ़ें: https://github.com/mrdoob/three.js/issues/17482#issuecomment -583694493। /^three काम करता है क्योंकि यह स्ट्रिंग 'three/examples/jsm/controls/OrbitControls.js' मेल खाता है जो बाहरी भी होना चाहिए क्योंकि यह तीन.जेएस लाइब्रेरी का हिस्सा है जबकि स्ट्रिंग 'three' नहीं है। ऐसा ही अन्य निर्भरताओं के साथ भी हो सकता है। मैं अन्य अज्ञात नुकसान से बचने के लिए सभी निर्भरताओं के लिए रेगेक्स का उपयोग करने या किसी भी पैकेज के खिलाफ एक नंगे मॉड्यूल विनिर्देशक के साथ मिलान करने की अनुशंसा करता हूं।

@gkjohnson विस्तृत स्पष्टीकरण के लिए धन्यवाद, जो मुझे समझ में आता है।

ऐसा लगता है कि यह इस धागे में इस मुद्दे को हल नहीं करता है, लेकिन चूंकि मैंने पहले ही धागे में दो बार इसका उल्लेख किया है, इसलिए मैंने अंततः एक आयात मानचित्र पॉलीफिल का परीक्षण किया: https://github.com/KhrosGroup/ केटीएक्स-सॉफ्टवेयर/पुल/172/फाइल्स। उस पॉलीफ़िल के साथ, 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'

और चूंकि मैंने अपने मॉड्यूल में पास कोड को कॉपी करना पसंद किया, ताकि बाद में इसे ब्राउजर पर तीन.जेएस से आयात न करना पड़े, मैंने आगे बढ़कर एक वर्कअराउंड पाया:

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

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

इस तरह, यह ब्राउज़र के साथ काम करता है, और मॉड्यूल आयात भी काम करना चाहिए।

संपादित करें :

स्थानीय तीन प्रोजेक्ट से लोड हो रहा है (नीचे उदाहरण देखें) इस दृष्टिकोण को तोड़ देगा और कुछ अतिरिक्त कामकाज की आवश्यकता होगी।

"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 फ़ाइल और तीन.js मॉड्यूल दोनों को बाहरी के रूप में चिह्नित किया गया है।

@gkjohnson मेरा उपयोग मामला बिल्कुल वही नहीं है, क्योंकि मैं केवल three lib को बाहरी के रूप में चिह्नित करना चाहता हूं, उदाहरण नहीं (मैं उदाहरण को मेरे निर्माण के साथ बंडल करना चाहता हूं)।

मैं एक बाहरी के रूप में तीन के साथ एक पुस्तकालय का निर्माण कर रहा हूं, मैं चाहता हूं कि उदाहरण बंडल चौड़ाई का निर्माण हो, लेकिन तीन के बिना, और जैसा कि ऊपर चर्चा की गई है, जब उदाहरणों से आयात मॉड्यूल, आउटपुट में तीन का कोड होगा। वेबपैक के साथ हासिल करना संभव है?

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

@Mcgode @recardinal मुझे नहीं लगता कि यह संभव है। मैं वही करना चाहता था इसलिए मैंने उदाहरणों से कोड कॉपी/पेस्ट किया; मेरे मामले में मुझे आयात और निर्यात को 'समायोजित' करना था और वह था। जाहिर है यह आदर्श नहीं है लेकिन यह मेरे उपयोग के मामले के लिए काफी अच्छा था।

मेरे पास वेबपैक के साथ यहां एक समान उपयोग केस है और तीन बाहरी के रूप में हैं। निम्नलिखित आयातों के कारण बंडल आउटपुट में तीन.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';

मैंने कहीं पढ़ा है कि उदाहरण/जेएस/* किसी बिंदु पर हटा दिया जाएगा। यह अच्छा होगा अगर जेएसएम उदाहरण इससे पहले "बस काम करेंगे"।