बेबेल के साथ ES6 में कॉमनजेएस, एएमडी और ब्राउज़र के साथ संगत मॉड्यूल को आप कैसे लिखते हैं?

Question

सामान्य ES5 में अगर मैं एक पैकेज है कि या तो सर्वर साइड या ब्राउज़र (CJS, एएमडी, RequireJS के माध्यम से) पर इस्तेमाल किया जा सकता है लेखक को चाहते हैं, मैं कुछ इस तरह करना होगा:

(function(name, definition)){ 
    if (typeof exports !== 'undefined' && typeof module !== 'undefined') { 
     module.exports = definition(); 
    } else if (typeof define === 'function' && typeof define.amd === 'object') { 
     define(definition); 
    } else { 
     this[name] = definition(); 
    } 
}('foo', function foo(){ 
     'use strict'; 

     return 'foo'; 
}) 

कैसे मैं प्राप्त ईएस 6 में एक पैकेज लिखते समय यह कार्यक्षमता?

मैं क्या करने की कोशिश की:

if (typeof exports !== 'undefined' && typeof module !== 'undefined') export Foo; 
else if (typeof define === 'function' && typeof define.amd === 'object') define(Foo); 
else this['Foo'] = Foo; 

हालांकि यह transpiling, कोलाहल मुझे एक त्रुटि फेंकता है:

SyntaxError: src/index.js: 'import' and 'export' may only appear at the top level (10:69) 
    9 | 
> 10 | if (typeof exports !== 'undefined' && typeof module !== 'undefined') export Foo; 
    |                 ^
    11 | else if (typeof define === 'function' && typeof define.amd === 'object') define(Foo); 
    12 | else this['Foo'] = Foo; 
    13 | 

यह किया काम जब मैं export के बजाय module.exports इस्तेमाल किया, लेकिन यह इस सख्ती से ऐसा करना संभव है ES6 का उपयोग कर?

Answer 1

इसलिए सार्वभौमिक मॉड्यूल परिभाषा में ES6 मॉड्यूल को शामिल करने का कोई वास्तविक तरीका नहीं है क्योंकि ES6 मॉड्यूल सख्ती से प्रति फ़ाइल हैं और सभी आयात और निर्यात विवरण शीर्ष स्तर पर होना चाहिए।

जब लोडर स्पेक किया जाता है तो रजिस्ट्री में मॉड्यूल जोड़ने का एक तरीका होगा और यह तब तक होगा जब आप एक यूएमडी में ईएस 6 मॉड्यूल शामिल करेंगे, तब तक कोई ब्राउज़र वास्तव में केवल ईएस 6 मॉड्यूल का समर्थन नहीं करेगा लक्ष्य एएमडी और कॉमनजेएस हैं, लेकिन आपको अपने लिए ऐसा करने के लिए ब्राउज़र या बैबेल जैसे कई कंपाइलर्स या trsnspilers का उपयोग करना चाहिए।

Answer 2

आपके पास एक सार्वभौमिक आउटपुट नहीं होगा लेकिन StealJS आपके बेबेल ट्रांसस्ड ईएस 6 प्रोजेक्ट को कॉमनजेएस, एएमडी और स्टैंडअलोन के रूप में निर्यात कर सकता है। कॉमनजेएस और एएमडी के लिए आपकी मूल मॉड्यूल संरचना को रखा जा रहा है ताकि आप अभी भी केवल उन निर्भरताओं को लोड कर सकें जिन्हें आपको वास्तव में चाहिए।

project exporting गाइड थोड़ा और विस्तार में यह बताते हैं, लेकिन जब NPM कार्यप्रवाह यह कैसे अपने निर्माण स्क्रिप्ट जैसा है का उपयोग कर (यह भी सीएसएस/कम/एस.ए.एस.एस. और अन्य निर्भरता का निर्माण करेगा, तो शामिल है):

{ 
    dist: { 
     system: { 
      config: "package.json!npm" 
     }, 
     outputs: { 
      "+cjs": {}, 
      "+amd": {}, 
      "+global-js": {}, 
      "+global-css": {} 
     } 
    } 
}