React: शीर्ष-स्तरीय ES निर्यात को औपचारिक रूप दें

इम्हो import * का एक तरीका है, मैं भी डिफ़ॉल्ट निर्यात करने का विरोध नहीं करता, लेकिन इसका उपयोग इस उदाहरण में अन्य सामानों को पुन: निर्यात करने के लिए नहीं किया जाना चाहिए:

export const Component = ...
export default React
React.Component = Component

लेकिन इसका उपयोग इस उदाहरण में अन्य सामानों को पुन: निर्यात करने के लिए नहीं किया जाना चाहिए:

क्या कोई तकनीकी कारण है? (एक ही काम करने के दो तरीके होने के अलावा।)

मेरी धारणा यह है कि जो लोग * (और डिफ़ॉल्ट का उपयोग नहीं करते) आयात करेंगे, उन्हें ट्री हिलने की समस्या नहीं होगी क्योंकि डिफ़ॉल्ट रूप से अप्रयुक्त रहेगा। लेकिन शायद मैं रोलअप इत्यादि को अधिक महत्व देता हूं।

उन सवालों का जवाब शायद @lukastaegert द्वारा दिया जा सकता है। सुनिश्चित नहीं है कि https://github.com/facebook/react/issues/10021#issuecomment -335128611 के बाद से कुछ बदल गया है

इसके अलावा रोलअप एकमात्र ट्री शेकर नहीं है, और जबकि वेबपैक का ट्री-शेकिंग एल्गोरिथम रोलअप में एक से भी बदतर है, इसका उपयोग संभवतः रोलअप की तुलना में अधिक है (दोनों उपकरण उत्कृष्ट कार्य करते हैं, मैं किसी को नाराज नहीं करना चाहता , केवल तथ्य बताते हुए) और यदि हम (समुदाय के रूप में) दोनों साधनों की एक साथ मदद कर सकते हैं तो हमें जब भी संभव हो ऐसा करना चाहिए।

क्या रिएक्ट के मामले में ट्री-शेकिंग _do_ कुछ भी करने जा रहा है, यह देखते हुए कि सब कुछ एक फ्लैट बंडल में प्रीप्रोसेस किया गया है? मुझे आश्चर्य है कि प्रतिक्रिया के लिए प्राथमिक आयात शैली क्या है, व्यक्तिगत रूप से मैं इसे एक डिफ़ॉल्ट निर्यात की तरह मानता हूं जैसे React.Component , React.Children लेकिन कभी-कभी नामित चीज cloneElement

जैसा कि @gaearon ने पहले ही कहीं और कहा है, प्रतिक्रिया के मामले में आकार में सुधार न्यूनतम होने की उम्मीद है। फिर भी, फायदे हैं:

• प्रतिक्रिया। बच्चों को शायद कुछ मामलों में हटाया जा सकता है (इसलिए मैंने सुना 😉)
• प्रतिक्रिया स्वयं मॉड्यूल बंडलर द्वारा शीर्ष दायरे में फहराया जा सकता है जो इसका समर्थन करते हैं। यह फिर से कुछ बाइट्स को हटा सकता है और एक ओह-थोड़ा-सा प्रदर्शन सुधार भी दे सकता है। मुख्य सुधार इस तथ्य में निहित होगा कि प्रत्येक मॉड्यूल के लिए React.Component संदर्भ देने वाला एक और चर होने की आवश्यकता नहीं है, लेकिन केवल एक जो हर जगह साझा किया जाता है (इस तरह रोलअप आमतौर पर करता है)। इसके अलावा, हालांकि यह सिर्फ मेरा अनुमान है, इससे वेबपैक के मॉड्यूलकॉन्केटेनेशनप्लगिन के बेलिंग आउट होने की संभावना कम हो सकती है
• प्रतिक्रिया के लिए स्थिर विश्लेषण न केवल मॉड्यूल बंडलर के लिए बल्कि आईडीई और अन्य उपकरणों के लिए भी आसान है। सीजेएस मॉड्यूल के लिए इस तरह के कई उपकरण पहले से ही उचित काम करते हैं लेकिन अंत में, उनके पक्ष में अनुमान लगाने का एक बहुत कुछ है। ES6 मॉड्यूल के साथ, विश्लेषण कोई ब्रेनर नहीं है।

निर्यात के प्रकार के लिए, निश्चित रूप से केवल नामित निर्यात वास्तव में आसान ट्री-हिलिंग का लाभ प्रदान करता है (जब तक कि आप जीसीसी का उपयोग नहीं करते हैं जो अपने आक्रामक कदम में थोड़ा और करने में सक्षम हो सकता है और शायद नवीनतम रोलअप यदि आप वास्तव में भाग्यशाली हैं) . प्रश्न यदि आप एक डिफ़ॉल्ट निर्यात भी प्रदान करते हैं तो यह तय करना अधिक कठिन है:

• प्रो: मौजूदा ES6 कोड बेस के लिए दर्द रहित माइग्रेशन (उदाहरण के लिए @jquense क्या वर्णन करता है)
• CON: चूंकि सब कुछ एक सामान्य वस्तु से जुड़ा हुआ है, एक बार इस वस्तु को शामिल करने के बाद, इसकी सभी कुंजियाँ एक बार में शामिल हो जाती हैं जो फिर से पेड़ को हिलाने के किसी भी प्रयास को हरा देती हैं। यहां तक ​​कि जीसीसी के लिए भी यहां कठिन समय हो सकता है।

दो-संस्करण प्रवासन रणनीति के रूप में, आप संगतता उद्देश्यों के लिए अगले संस्करण में एक डिफ़ॉल्ट निर्यात जोड़ सकते हैं जिसे बहिष्कृत घोषित किया गया है (यह गेटटर आदि के माध्यम से चेतावनी भी प्रदर्शित कर सकता है) और फिर इसे बाद के संस्करण में हटा दें।

यह भी एक दिलचस्प मामला है: https://github.com/facebook/react/issues/11526। जबकि परीक्षण के लिए मंकीपैचिंग थोड़ा छायादार है, हम इसे तोड़ने के बारे में जागरूक होना चाहते हैं (या इसके लिए एक समाधान है)।

इस ट्विटर बातचीत के जरिए यहां आया हूं। मेरे लिए, इस प्रश्न का एक स्पष्ट सही उत्तर है: रिएक्ट और रिएक्टडॉम को केवल नामित निर्यात निर्यात करना चाहिए। वे ऐसी वस्तुएं नहीं हैं जिनमें राज्य होता है, या अन्य पुस्तकालय गुणों को बदल सकते हैं या संलग्न कर सकते हैं (#11526 के बावजूद) - उनके मौजूद होने का एकमात्र कारण Component , createElement को 'डालने' के स्थान के रूप में है।

(यह बंडलरों के लिए भी जीवन को आसान बनाता है, लेकिन यह न तो यहां है और न ही वहां है।)

बेशक, यह वर्तमान में डिफ़ॉल्ट आयात और ट्रांसपिलिंग का उपयोग करने वाले लोगों के लिए एक महत्वपूर्ण परिवर्तन प्रस्तुत करता है। @lukastaegert शायद यहां सही विचार है,

हालांकि मेरे पास #11526 के लिए तैयार सुझाव नहीं है। शायद शिपिंग ESM ने वैसे भी v17 के लिए प्रतीक्षा की होगी, जिस स्थिति में बहिष्करण चेतावनियों के बारे में चिंता करने की कोई आवश्यकता नहीं होगी।

लोग वास्तव में पसंद करने लगे हैं

import React, { Component } from 'react'

इसलिए उन्हें इसे छोड़ने के लिए राजी करना मुश्किल हो सकता है।

मुझे लगता है कि यह बहुत बुरा नहीं है, भले ही थोड़ा अजीब हो:

import * as React from 'react';
import { Component } from 'react';

स्पष्ट करने के लिए, हमें दायरे में होने के लिए React की आवश्यकता है (इस मामले में, एक नाम स्थान के रूप में) क्योंकि JSX React.createElement() ट्रांसपाइल करता है। हम JSX को तोड़ सकते हैं और कह सकते हैं कि यह इसके बजाय वैश्विक jsx() फ़ंक्शन पर निर्भर करता है। तब आयात इस तरह दिखेगा:

import {jsx, Component} from 'react';

जो शायद ठीक है लेकिन एक बड़ा बदलाव है। इसका मतलब यह भी होगा कि रिएक्ट यूएमडी बिल्ड को अब window.jsx भी सेट करने की आवश्यकता है।

मैं सुझाव क्यों कर रहा हूँ jsx के बजाय createElement ? ठीक है, createElement पहले से ही ओवरलोडेड है ( document.createElement ) और जबकि यह React. क्वालिफायर के साथ ठीक है, यह वैश्विक पर दावा किए बिना बहुत अधिक है। टीबीएच मैं इन विकल्पों में से किसी के बारे में बहुत उत्साहित नहीं हूं, और मुझे लगता है कि यह शायद सबसे अच्छा मध्य मैदान होगा:

import * as React from 'react';
import { Component } from 'react';

और JSX को डिफ़ॉल्ट रूप से React.createElement ट्रांसपिलिंग करते रहें।

स्वीकारोक्ति: मुझे हमेशा यह थोड़ा अजीब लगा कि आपको JSX का उपयोग करने के लिए स्पष्ट रूप से React आयात करना होगा, भले ही आप वास्तव में कहीं भी उस पहचानकर्ता का उपयोग नहीं कर रहे हों। शायद भविष्य में, ट्रांसपिलर JSX का सामना करने पर import * as React from 'react' (प्रीएक्ट आदि के लिए विन्यास योग्य) सम्मिलित कर सकते हैं, यदि यह पहले से मौजूद नहीं है? इस तरह आपको बस इतना करना होगा...

import { Component } from 'react';

... और नामस्थान आयात का स्वचालित रूप से ध्यान रखा जाएगा।

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

क्या @ रिच-हैरिस ने सुझाव दिया (जेएसएक्स का उपयोग होने पर एक विशिष्ट आयात डालना) ट्रांसपिलर प्लगइन द्वारा आसानी से किया जाता है। समुदाय को अपने babel-plugin-transform-react-jsx को अपग्रेड करना होगा और बस इतना ही। और निश्चित रूप से मौजूदा सेटअप अभी भी काम करेंगे यदि केवल एक फ़ाइल में import * as React from 'react'; जोड़ता है।

बेशक हमें अन्य मॉड्यूल सिस्टम पर विचार करने की आवश्यकता है, लेकिन यह हल करने के लिए एक कठिन समस्या की तरह प्रतीत नहीं होता है। क्या मन में कोई विशिष्ट गोचा है?

बेशक हमें अन्य मॉड्यूल सिस्टम पर विचार करने की आवश्यकता है, लेकिन यह हल करने के लिए एक कठिन समस्या की तरह प्रतीत नहीं होता है। क्या मन में कोई विशिष्ट गोचा है?

मुझे नहीं पता, इसे कैसे संभालना है, इस बारे में आपका विशिष्ट सुझाव क्या है? बैबल JSX प्लगइन के लिए डिफ़ॉल्ट क्या होगा?

लोग वास्तव में पसंद करने लगे हैं

import React, { Component } from 'react'

कौन से लोग? आगे आओ कि मैं तुम्हारा उपहास करूं।

मैंने वह बहुत कुछ किया 🙂 मुझे यकीन है कि मैंने इसे अन्य जगहों पर भी देखा है।

डिफ़ॉल्ट इस समय React.createElement और यह काफी हद तक वही रहेगा। एकमात्र समस्या यह है कि यह अब वैश्विक मान लेता है (या पहले से ही दायरे में उपलब्ध है)।

मुझे लगता है कि ईएस मॉड्यूल मूल रूप से मॉड्यूल करने का मानक तरीका है (हालांकि अभी तक सभी द्वारा अपनाया नहीं गया है), यह मानना ​​​​उचित है कि बहुमत इसका उपयोग करता है (या चाहिए)। विशाल बहुमत पहले से ही अपने बंडल बनाने के लिए विभिन्न बिल्ड स्टेप टूल्स का उपयोग करता है - जो इस चर्चा में और भी सच है क्योंकि हम जेएसएक्स सिंटैक्स को ट्रांसपिल करने के बारे में बात कर रहे हैं। जेएसएक्स प्लगइन के डिफ़ॉल्ट व्यवहार को React.createElement के दायरे में ऑटो सम्मिलन में बदलना उचित बात है। हम इस बदलाव के लिए एकदम सही समय पर हैं, बेबेल@7 जल्द ही आ रहा है (-इश)। हाल ही में babel-helper-module-imports को जोड़ने के साथ फ़ाइल में सही प्रकार के आयात (es/cjs) को सम्मिलित करना पहले से कहीं अधिक आसान है।

आज के व्यवहार (दायरे में मौजूद मानते हुए) को जमानत देने के लिए यह विन्यास योग्य होना वास्तव में उपयोगकर्ताओं के अल्पसंख्यक के लिए आवश्यक कॉन्फ़िगरेशन में मामूली बदलाव और बहुमत के लिए एक सुधार (निश्चित रूप से, एक बड़ा नहीं - लेकिन फिर भी) जैसा लगता है।

क्या हमें लोगों को बेहतर पेड़ झटकों के लिए आयात करने के लिए प्रोत्साहित करना चाहिए?

@alexlamsl के लिए धन्यवाद uglify-es ने सामान्य परिदृश्यों में export default दंड को समाप्त कर दिया है:

$ cat mod.js 
export default {
    foo: 1,
    bar: 2,
    square: (x) => x * x,
    cube: (x) => x * x * x,
};

$ cat main.js 
import mod from './mod.js'
console.log(mod.foo, mod.cube(mod.bar));



md5-d6d4ede42fc8d7f66e23b62d7795acb9

$ uglifyjs -V
uglify-es 3.2.1

```js
$ cat bundle.js | uglifyjs --toplevel -bc
var mod_foo = 1, mod_bar = 2, mod_cube = x => x * x * x;

console.log(mod_foo, mod_cube(mod_bar));

$ cat bundle.js | uglifyjs --toplevel -mc passes=3
console.log(1,8);

वाह, यह बहुत अच्छा नया है 👏 क्या uglify-es को अब स्थिर माना जाता है? मुझे याद है कि आपने कुछ महीने पहले उल्लेख किया था कि यह अभी तक नहीं है, लेकिन मैं इसे गलत तरीके से याद कर सकता हूं, इसलिए निश्चित नहीं है।

वैसे भी - रोलअप दुनिया में यह सब और अच्छा है, लेकिन यह देखते हुए कि React ज्यादातर ऐप्स में बंडल किया गया है और वे अधिकतर webpack जो डिफ़ॉल्ट रूप से स्कोप होस्टिंग नहीं करता है, मैं अभी भी कहूंगा कि किसी वस्तु को डिफ़ॉल्ट के रूप में निर्यात करने से बचा जाना चाहिए ताकि छोटे बंडल आकार बनाने के उनके प्रयासों में uglisy-es + rollup अलावा अन्य उपकरणों की सहायता की जा सके। इसके अलावा मेरे लिए इससे बचने के लिए यह अर्थपूर्ण रूप से बेहतर है - ऐसे मामलों में वास्तव में जो काम करता है वह नामस्थान प्रदान कर रहा है और import * as Namespace from 'namespace' का उपयोग करते समय इसका बेहतर प्रतिनिधित्व किया जाता है

क्या uglify-es को अब स्थिर माना जाता है?

जेएस पारिस्थितिकी तंत्र में किसी और चीज की तरह स्थिर। प्रति सप्ताह 500K से अधिक डाउनलोड।

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

वैसे भी, यह एक विकल्प है। वेबपैक डिफ़ॉल्ट वैसे भी आदर्श नहीं हैं - जैसा कि आप जानते हैं, आपको ModuleConcatenationPlugin का उपयोग करना होगा।

यहां कुछ सेंट जोड़ना:

• मैं @ रिच-हैरिस से पूरी तरह सहमत हूं कि शब्दार्थ, नामित निर्यात सही विकल्प हैं
• मुझे वास्तव में JSX सिंटैक्स का उपयोग करने में सक्षम होने के लिए import React from 'react' या import * as React from 'react' नहीं है। मेरी नज़र में, यह डिज़ाइन स्पष्ट रूप से इंटरफ़ेस अलगाव सिद्धांत का उल्लंघन कर रहा है जिसमें यह उपयोगकर्ताओं को केवल createElement भाग का उपयोग करने में सक्षम होने के लिए सभी प्रतिक्रिया आयात करने के लिए मजबूर करता है (हालांकि स्वीकार्य रूप से नामस्थान निर्यात के साथ, रोलअप जैसा बंडलर होगा अनावश्यक निर्यात को फिर से हटा दें)

इसलिए यदि हम ऐसे बिंदु पर हैं जहां हम ब्रेकिंग-चेंज निर्णय ले सकते हैं, तो मैं इसे बदलने की सलाह दूंगा ताकि जेएसएक्स एकल (वैश्विक या आयातित) फ़ंक्शन पर निर्भर हो। मैंने इसे createJSXElement() कहा होगा, जो मेरी राय में इसे createElement() से भी बेहतर बताता है और अब इसे समझने के लिए प्रतिक्रिया संदर्भ की आवश्यकता नहीं है। लेकिन ऐसी दुनिया में जहां हर बाइट मायने रखता है, jsx() शायद ठीक भी है।

यह अंत में JSX को रिएक्ट से इस तरह से अलग कर देगा कि अन्य पुस्तकालय समान परिवर्तन का उपयोग करके और एक अलग jsx फ़ंक्शन की आपूर्ति करके JSX का समर्थन करना चुन सकते हैं। बेशक, इस तरह के परिवर्तन के माध्यम से अनगिनत स्थापित अनुप्रयोगों का मार्गदर्शन करने के लिए आपकी बहुत ज़िम्मेदारी है, लेकिन एक वास्तुशिल्प दृष्टिकोण से, यह वह जगह है जहां मुझे लगता है कि रिएक्ट और जेएसएक्स को आगे बढ़ना चाहिए। इस तरह के परिवर्तन को भारी भारोत्तोलन करने के लिए बैबेल का उपयोग करना मेरे लिए एक महान विचार की तरह लगता है!

व्यक्तिगत रूप से मुझे jsx हेल्पर में माइग्रेट करने में ज्यादा लाभ नहीं दिख रहा है क्योंकि बैबेल प्लगइन के लिए डिफ़ॉल्ट आईएमएचओ इसे react पैकेज से आयात करना चाहिए, इसलिए वास्तविक सहायक का नाम वास्तव में नहीं है मामला - बाकी बस इसे कॉन्फ़िगर करने योग्य होने की बात है।

यह शायद मुख्य चर्चा के लिए थोड़ा स्पर्शरेखा है, लेकिन मैं उत्सुक हूं कि ES मॉड्यूल process.env.NODE_ENV जाँच के साथ सशर्त रूप से dev/prod बंडलों को निर्यात करने के लिए कितनी अच्छी तरह काम करते हैं? उदाहरण के लिए,

https://github.com/facebook/react/blob/d9c1dbd61772f8f8ab0cdf389e70463d704c480b/packages/react/npm/index.js#L3 -L7

मुझे यहां कुछ स्पष्ट याद आ रहा है, लेकिन मैं यह देखने के लिए संघर्ष कर रहा हूं कि इस पैटर्न को ईएस मॉड्यूल में कैसे अनुवादित किया जाए?

@NMinhNguyen ES मॉड्यूल के साथ सशर्त निर्यात संभव नहीं है।

process.env.NODE_ENV चेक अधिक दानेदार (कोड) स्तर पर हो सकते हैं, हालांकि, उपयुक्त मूल्यों के साथ बंडलर द्वारा प्रतिस्थापित किए जाने के लिए तैयार हैं।

@Andarist @milesj मेरे संदेह की पुष्टि के लिए धन्यवाद :)

process.env.NODE_ENV चेक अधिक दानेदार (कोड) स्तर पर हो सकते हैं, हालांकि, उपयुक्त मूल्यों के साथ बंडलर द्वारा प्रतिस्थापित किए जाने के लिए तैयार हैं।

रिएक्ट 16 ब्लॉग पोस्ट से मैंने सोचा था कि process.env.NODE_ENV चेक उद्देश्य पर बहुत ऊपर तक खींचे गए थे (जैसा कि उनके अधिक बारीक होने के विपरीत, जो कि वे स्रोत में हैं, अगर मैं गलत नहीं हूं ), Node.js में प्रदर्शन में मदद करने के लिए?

बेहतर सर्वर-साइड रेंडरिंग

रिएक्ट 16 में पूरी तरह से फिर से लिखा गया सर्वर रेंडरर शामिल है। यह वास्तव में तेज़ है। यह स्ट्रीमिंग का समर्थन करता है, जिससे आप क्लाइंट को तेजी से बाइट भेजना शुरू कर सकते हैं। और एक नई पैकेजिंग रणनीति के लिए धन्यवाद जो process.env चेक को संकलित करता है (मानो या न मानो, नोड में process.env पढ़ना वास्तव में धीमा है!), अब आपको अच्छा सर्वर प्राप्त करने के लिए रिएक्ट को बंडल करने की आवश्यकता नहीं है- प्रतिपादन प्रदर्शन।

जैसे, मुझे यकीन नहीं है कि कोई module फ़ील्ड का उपयोग package.json और ES बंडलों को सपाट रखते हुए और Node.js perf को प्रभावित नहीं करते हुए ESM के लिए dev/prod के बीच अंतर कर सकता है।

जैसे, मुझे यकीन नहीं है कि कोई package.json में मॉड्यूल फ़ील्ड का उपयोग कैसे कर सकता है और ES बंडलों को सपाट रखते हुए और Node.js perf को प्रभावित नहीं करते हुए ESM के लिए dev/prod के बीच अंतर कर सकता है।

यह निश्चित रूप से एक खामी है, क्योंकि ऐसा करने के लिए फिलहाल कोई मानक तरीका नहीं है। ओटीओएच यह सिर्फ टूलिंग की बात है, आज भी आपके आवेदन के निर्माण चरणों में इसे संकलित करना संभव है (और यह आसान है)। ओएफसी यह आसान होगा यदि पैकेज देव/प्रोड बिल्ड का पर्दाफाश कर सकता है और रिज़ॉल्वर को पता चल जाएगा कि कौन सा चुनना है, लेकिन शायद यह इस विचार को टूलिंग लेखकों को आगे बढ़ाने का मामला है।

कक्षा के लिए:

import Component from 'react/Component'

class MyButton extends Component{
  constructor(){
    this.state = {}
  }

  render() {
    return <button> Button <Button>
  }
}

जहां ट्रांसफॉर्म सुपर.क्रिएट एलीमेंट () का उपयोग जेएसएक्स में बदलने या स्टेटिक कंपोनेंट.क्रिएट एलीमेंट () का उपयोग करने के लिए करेगा।

स्टेटलेस घटकों के लिए:

import jsx from 'react/jsx'

const MyButton = () => jsx`<button> Button <Button>`;

टैग किए गए टेम्पलेट का शाब्दिक उपयोग करना संभव है?

नोड उम्मीद से इस पीआर को स्वीकार करता है https://github.com/nodejs/node/pull/18392

हम यहां @ रिच-हैरिस से सहमत हैं।

बस इस धागे पर एक टिप्पणी छोड़ना जिसका वास्तव में विशेष रूप से उल्लेख नहीं किया गया है।

मैं ऐसी स्थिति में हूं जहां मैं एक बंडलर का उपयोग बिल्कुल नहीं कर रहा हूं और ब्राउज़र के माध्यम से मूल रूप से उपयोग के लिए प्रतिक्रिया और विभिन्न घटकों को आयात करना चाहता हूं ( <script type="module" src="..."> ), अर्थात

import React from “https://unpkg.com/[email protected]/umd/react.development.js”;
import ReactDOM from “https://unpkg.com/[email protected]/umd/react-dom.development.js”;
ReactDOM.render(
  React.createElement(...),
  document.getElementById('root')
);

मैं जो कह सकता हूं, वह आज संभव नहीं है। इसके बजाय, मुझे सीडीएन से <script> टैग के माध्यम से प्रतिक्रिया के यूएमडी संस्करण को शामिल करना होगा और फिर मान लें कि यह किसी भी <script type="module"> मॉड्यूल में खिड़की पर मौजूद है जो मैं लिखता हूं:

// myPage.html
<div id="myComponentRoot"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script type="module" src="/assets/scripts/components/MyComponent.js"></script>

// MyComponent.js
import AnotherComponent from "/assets/scripts/components/AnotherComponent.js";
window.ReactDOM.render(
  window.React.createElement(AnotherComponent),
  document.getElementById('root')
);

// AnotherComponent.js
export default class AnotherComponent extends window.React.Component {...}

एक सीडीएन से प्रतिक्रिया आयात करना शानदार होगा। यह फाइलों को अलग रखने में सक्षम होने के साथ-साथ ब्राउज़र में प्रोटोटाइप को बहुत तेज़ और आसान बना देगा। एक चीज जो मैंने हमेशा महसूस की थी कि मैं एक बंडलर के बिना रिएक्ट का उपयोग करते समय त्याग कर रहा था, फ़ाइल द्वारा घटकों (और अन्य उपयोगिता कार्यों, आदि) को अलग करने की क्षमता थी। लेकिन अब देशी ES मॉड्यूल के लिए ब्राउज़र समर्थन के साथ, मैं अपने रिएक्ट घटकों को अलग-अलग फाइलों में लिख सकता हूं और ब्राउज़र को उनके लिखे जाने पर ही उनका उपभोग कर सकता हूं। माना कि अगर मैं JSX का उपयोग नहीं कर रहा हूं, लेकिन अगर मैं JSX का उपयोग कर रहा था, तो भी मैं एक बिल्ड स्टेप के माध्यम से सभी फाइलों को स्थानांतरित कर सकता था और मेरे सभी आयात अभी भी ब्राउज़र में काम करेंगे।

// /assets/scripts/entry.js
import React from “https://unpkg.com/[email protected]/umd/react.development.js”;
import React from “https://unpkg.com/[email protected]/umd/react-dom.development.js”;
import RelatedPosts from "/assets/scripts/components/RelatedPosts.js";
ReactDOM.render(
  React.createElement(RelatedPosts),
  document.getElementById('root')
);

// /assets/scripts/components/RelatedPosts.js
import React from “https://unpkg.com/[email protected]/umd/react.development.js”;
import ListItem from "/assets/scripts/components/ListItem.js"
export default class MyComponent extends React.Component {
  componentDidMount() { /* fetch some data */ }
  render() { 
    return React.createElement(
      'ul',
      {},
      this.state.items.map(item => React.createElement(ListItem, { item: item })
    )
  }
}

// /assets/scripts/components/ListItem.js
import React from “https://unpkg.com/[email protected]/umd/react.development.js”;
export default function ListItem(props) {
  return React.createElement('li', null, ...)
}

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

अगर रिएक्ट को कुछ इस तरह का समर्थन होता, तो टूलिंग की कोई आवश्यकता नहीं होती। मैं अभी ब्राउज़र का उपयोग कर रहा हूँ। मैं कुछ व्यक्तिगत परियोजनाओं में इस तरह के कोड भेज सकता हूं जो आधुनिक ब्राउज़र मानते हैं और पृष्ठ पर प्रगतिशील वृद्धि के रूप में प्रतिक्रिया का उपयोग करते हैं। जब मैं 12 महीनों में कोड बेस पर वापस आता हूं, तो यह शानदार होता है, मुझे टूलिंग एपीआई का एक गुच्छा बदलने की जरूरत नहीं है या यहां तक ​​कि एनपीएम को पैकेज मैनेजर के रूप में भी नहीं रखना है। मैं सिर्फ ब्राउज़र से एपीआई का उपयोग कर रहा हूं, और कुछ नहीं।

एफडब्ल्यूआईडब्ल्यू: अगर/जब रिएक्ट इस तरह के समर्थन के साथ जहाज करता है, तो मुझे लगता है कि यह दिखाने के लिए बहुत मूल्यवान हो सकता है कि आप डॉक्स में इस तरह रिएक्ट का उपयोग कैसे कर सकते हैं, यह सिखाते हुए कि आप प्रत्येक घटक तर्क को अलग करके रिएक्ट और उसके घटक मॉडल का लाभ उठा सकते हैं। खुद की फ़ाइल है और आपको इसे करने के लिए बंडलर की आवश्यकता नहीं है, बस देशी <script type="module"> , एक सीडीएन (या आपकी अपनी स्थानीय प्रति) से प्रतिक्रिया आयात करें, और अपना बंद!

अब, मोबाइल संस्करण सहित सभी आधुनिक ब्राउज़र ESM का समर्थन करते हैं। ESM अब भविष्य का मॉड्यूल सिस्टम नहीं है बल्कि वर्तमान डिफैक्टो-मानक है।

कृपया इस बात से अवगत रहें कि मानकीकृत मॉड्यूल प्रदान नहीं करना एक गंभीर समस्या है, विशेष रूप से एक डिफैक्टो-मानक वेब लाइब्रेरी के लिए।

import * as React from 'react';
import * as ReactDOM from 'react-dom';

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

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

मैंने इस पर यहाँ और यहाँ काम करना शुरू किया

@TrySound आपके योगदान के लिए धन्यवाद।
क्या ईएसएम बिल्ड को पकड़ने और परीक्षण करने के लिए कोई जगह है?

यह केवल प्रतिक्रिया-इस पैकेज के लिए तैयार है।

@TrySound
ठीक है, मुझे आपकी शाखा https://github.com/TrySound/react/tree/react-is-esm मिल गई है , और बना लिया है, और अब मुझे पता है कि आपका क्या मतलब था। react-dom भी प्रतीक्षा कर रहे हैं।

मुझे लगता है कि रिएक्ट समुदाय ने इस मुद्दे पर कुछ समय के लिए काफी चर्चा की।
https://discuss.reactjs.org/t/es6-import-as-react-vs-import-react/360/

कृपया आधिकारिक ES6 मॉड्यूल विनिर्देश तय करें, और जल्द ही प्रकाशित करें।

@kenokabe हम रास्ते में हैं। कृपया हमें मजबूर न करें। यह इतना आसान नहीं है।

वर्तमान योजना सभी पैकेजों को केवल नामित निर्यात के साथ माइग्रेट कर रही है। यह परिवर्तन लाइब्रेरी कोड को प्रभावित नहीं करेगा और इसमें ब्रेकिंग परिवर्तन नहीं होने चाहिए क्योंकि डॉक्स नामित निर्यात का भी उपयोग करता है।

अन्य पैकेजों के लिए हमें डिफ़ॉल्ट और नामित निर्यात दोनों को संभालने की आवश्यकता है जो विभिन्न उपकरणों के साथ अलग-अलग काम करते हैं।

@TrySound क्षमा करें।
मेरा मतलब आपके लिए नहीं था, क्योंकि इस विषय का मुख्य उल्लेख है

हम इसे आसानी से नहीं कर सकते क्योंकि हमने वास्तव में यह तय नहीं किया है कि प्रत्येक पैकेज से शीर्ष-स्तरीय ES निर्यात कैसा दिखेगा। उदाहरण के लिए, क्या प्रतिक्रिया में नामित निर्यातों का एक समूह होता है, लेकिन एक डिफ़ॉल्ट निर्यात भी होता है जिसे रिएक्ट कहा जाता है? क्या हमें लोगों को बेहतर पेड़ झटकों के लिए आयात करने के लिए प्रोत्साहित करना चाहिए?

और, जिस दिन का उल्लेख किया गया है, वह कुछ समय पहले का है, और मुझे लगा कि रिएक्ट समुदाय में इस पर चर्चा की गई है, इसलिए मैं सुझाव देना चाहता था कि निर्णय स्पष्ट होगा। धन्यवाद!

इस पर कुछ अपडेट प्राप्त करना चाहते हैं ...

मैं अपने एप्लिकेशन को बंडल करने के लिए वेबपैक v4 का उपयोग कर रहा हूं, जबकि मेरा आईडीई इंटेलिजेंस (वेबस्टॉर्म) मुझे import * as React from 'react'; का उपयोग करने का सुझाव देता है जबकि मेरे सहकर्मी मुझे कोड समीक्षा में import React from 'react'; बदलने के लिए कहते हैं। दोनों ठीक काम करते हैं इसलिए मैंने सोचा कि वह कुछ बकवास कह रहा है, लेकिन उसे खुश करने के लिए मैं इसे वैसे भी बदल रहा हूं। इसी तरह मुझे यह धागा मिलता है।

उत्सुकता से बाहर, मैं इसके बीच के अंतिम निर्माण आकार में अंतर की तुलना करता हूं (रिएक्ट 16.8.1 के साथ):

import * as React from 'react'; : 6,618,723 बाइट्स
import React from 'react'; : 6,619,077 बाइट्स

तो जाहिर है, इसमें कुछ अंतर थे, हालांकि मामूली। (नोट। मैंने propTypes साथ भी ऐसा ही किया है)

अगर इस सूत्र में मेरी समझ सही है, तो यह import * as React from 'react'; होने का पक्ष होगा, है ना?! क्योंकि (1) हाँ, इसने कुछ आकार बचाया; (2) ईएसएम एक मानकीकृत तरीका है इसलिए कोई और सीजेएस नहीं बचा है। अगर ऐसा है तो मैं आज इसे बदलना चाहता हूं और अपने आईडीई के साथ संरेखित करना चाहता हूं।

@leoyli लंबी अवधि में हाँ। लेकिन पहले मौजूदा कोड को न तोड़ने के लिए नामित और डिफ़ॉल्ट निर्यात दोनों होंगे।

मैंने यहां मामलों को अपने हाथों में लिया, कुछ हद तक एक प्रयोग के रूप में क्योंकि मैं अब अपनी परियोजनाओं में बंडलर का उपयोग नहीं कर रहा हूं और अभी भी प्रतिक्रिया का उपयोग करना चाहता हूं (unpkg.com से सीधे आप अन्य पुस्तकालयों जैसे वू, हाइपरएप इत्यादि के साथ कर सकते हैं) . यही वह है जो मैं लेकर आया, कुछ भी फैंसी नहीं, बस एक हाथ संपादित उमड:

https://github.com/lukejacksonn/es-react

एक ES6 मॉड्यूल React और ReactDOM . के नवीनतम संस्करण को उजागर करता है

जैसा कि रीडमे में वर्णित है, यह ज्यादातर एक पीओसी है, लेकिन उन लोगों के लिए जो इस बिल्ड के उतरने का इंतजार नहीं कर सकते हैं, तो यह एक 16.8.3 बिल्ड है जिसमें हुक, सस्पेंस, आलसी आदि शामिल हैं और यह काम करके उम्मीद के मुताबिक काम करता है:

import { React, ReactDOM } from 'https://unpkg.com/es-react'

हो सकता है कि इस सूत्र में आप में से कुछ इसे उपयोगी पाएंगे .. व्यक्तिगत रूप से मैं एक बिल्ड स्टेप फ्री रिएक्ट स्टार्टर प्रोजेक्ट बनाने के लिए इस दृष्टिकोण का उपयोग कर रहा हूं। इस पर भी अभी काम चल रहा है।

@lukejacksonn हम उत्पादन पर भी इस तरह के समाधान का उपयोग कर रहे हैं, जबकि हमारा दृष्टिकोण इस अर्थ में अलग था कि यह आपके वर्तमान प्रोजेक्ट में रिएक्ट और रिएक्टडॉम के यूएमडी संस्करण के लिए एक ट्रांसफॉर्मर स्क्रिप्ट है। और यह इन फ़ाइलों को अलग से आउटपुट करता है, इसलिए अधिकांश कोड के लिए इसे प्रतिस्थापन में एक बूंद होना चाहिए। यदि आप https://github.com/wearespindle/react-ecmascript में रुचि रखते हैं और आप इसे unpkg https://unpkg.com/react-ecmascript/ से भी लोड कर सकते हैं

@ PM5544 ओह वाह .. यह मेरी तुलना में कहीं अधिक व्यापक समाधान है! बढ़िया काम

बहुत बढ़िया सामान @PM5544। किसी दिन इसके बारे में और सुनना अच्छा लगेगा। हो सकता है कि ज़ेबिया में अतिथि उपस्थिति हो?
मैंने हाल ही में अपने ओपन सोर्स पैकेज को बंडल करने के लिए पैक अपनाया है, जो यूएनपीकेजी का समर्थन करता है।
किसी को बंडलर का उपयोग करने के बजाय सीधे यूएनपीकेजी से निर्भरता लोड करने पर एक अच्छा लेख पता है?

मैं वर्तमान में एक लिख रहा हूँ और इसे जून में भी रिएक्ट नॉर्वे में एक भाषण के रूप में दे रहा हूँ!

@TrySound क्या फरवरी से इस पर कोई अपडेट आया है? इस मुद्दे को आगे बढ़ाने के लिए क्या बचा है, और क्या मैं कुछ कोडिंग कार्य द्वारा इस मुद्दे को बंद करने में भाग ले सकता हूं? मैंने पहले ही सीए पर हस्ताक्षर कर दिए हैं, और मेरे पास इस पर काम करने के लिए आज समय उपलब्ध है।

इसे पहले मर्ज करने की जरूरत है https://github.com/facebook/react/pull/15037

@TrySound ठीक है धन्यवाद, मैंने उस सूत्र में सहायता के लिए अपना प्रस्ताव भेज दिया है।

जब आप डिफ़ॉल्ट प्रतिक्रिया निर्यात के साथ जाते हैं तो आप इस दृष्टिकोण के साथ जा सकते हैं:

// react/index.js
import * as React from "./react";
export { React as default }
export * from "./react";

// react/react.js
export function createElement() {}
...

यह सांख्यिकीय रूप से विश्लेषण करने योग्य बनाता है कि डिफ़ॉल्ट निर्यात एक नाम स्थान वस्तु है जो वेबपैक 5 और रोलअप में इन निर्माणों के लिए ट्री-शेकिंग की अनुमति देता है:

import React from "react";

React.createElement(); // <- only `createElement` export is used

रोलअप को वह बहुत पसंद आएगा

मैं 1.5 साल से रोलअप गटर चैट में हूं और इस तरह के मुद्दे हर 2 हफ्ते में सामने आते हैं ...

BTW, @lukejacksonn ने es-react fork पर एक जबरदस्त काम किया है, इसकी अत्यधिक अनुशंसा कर सकते हैं।

BTW, @lukejacksonn ने es-react fork पर एक जबरदस्त काम किया है, इसकी अत्यधिक अनुशंसा कर सकते हैं।

मुझे आश्चर्य है कि आधिकारिक एफबी टीम इसके लिए कुछ क्यों नहीं करती है।

मैं यह भी उम्मीद कर रहा था कि इससे चीजों को आगे बढ़ाने के लिए कुछ दबाव पैदा होगा, और मुझे लगता है कि @lukejacksonn खुद भी ऐसा ही था। जैसा कि मैं समझता हूं, हालांकि, मूल स्रोतों से अपना कांटा बनाने के लिए उन्हें वास्तव में रिएक्ट टीम से कुछ समर्थन प्राप्त हुआ था, इसलिए ऐसा लगता है कि इसमें कम से कम कुछ रुचि है।

मुझे भी वाकई यही उम्मीद थी। वास्तव में मुझे पैकेज के निर्माण में प्रतिक्रिया टीम से कोई समर्थन नहीं मिला (@threepointone से प्रोत्साहन के कुछ प्रकार के अलावा)। हाल ही में फॉर्मिडेबल में एक सहयोगी ने मुझे पैकेज को प्रोग्रामिक रूप से बनाने में मदद की, जो हर बार प्रतिक्रिया का एक नया संस्करण जारी होने पर इसे हाथ से करने में एक सुधार है, लेकिन नेटवर्क टैब में बहुत कम साफ आउटपुट होता है, इसलिए मुझे यकीन नहीं है कि यह होगा अभी तक ऐसे ही रहो। हम देखेंगे!

यह अब लगभग 2020 है, मैं जानना चाहूंगा कि क्या आधिकारिक एफबी टीम से कोई अपडेट है? क्या रिएक्ट v17 में इससे संबंधित कोई बदलाव होंगे?

उन लोगों के लिए जिन्हें अब अद्यतन ES-मॉड्यूल प्रतिक्रिया की आवश्यकता है, कोशिश करें @pica/react , जो पहले से ही v16.13.x पर है
https://www.npmjs.com/package/@pika/react
https://www.npmjs.com/package/@pika/react -dom
https://github.com/pikapkg/react

दूर के भविष्य में, शायद।

ठीक है, पहले से ही भविष्य में। क्या यह अब निकट भविष्य में है?

@gaearon निर्यात की संरचना कैसे करें (डिफ़ॉल्ट निर्यात बनाम नामित निर्यात) तय करने के लिए अवरोधक क्या है? क्या यह निर्णय लेने में समुदाय आपकी कुछ मदद कर सकता है?

जाहिर है कि निर्णय कुछ समय पहले ही किया जा चुका है: #18102। इस मुद्दे को अब बंद किया जा सकता है।

मैं इस पर एक छोटा सा अपडेट दूंगा।

कोई डिफ़ॉल्ट निर्यात नहीं

हमारी अंतिम योजना पूरी तरह से डिफ़ॉल्ट निर्यात से दूर जाने की है:

import { useState } from 'react';

उस दुनिया में, यह काम नहीं करेगा:

import React from 'react'; // no

यह काम करेगा हालांकि यह थोड़ा शोर है:

import * as React from 'react';

लेकिन यहाँ किकर है। वास्तव में React आयात करने का कोई खास कारण नहीं होगा।

JSX ऑटो आयात

आज लोग React आयात करने का कारण ज्यादातर JSX है। लेकिन @lunaruan नए JSX

तो आप इससे जाएंगे:

import React from 'react';
import { useState } from 'react';

function Button() {
  const [pressed, setPressed] = useState(false)
  return <button />
}

इसके लिए:

import { useState } from 'react';

function Button() {
  const [pressed, setPressed] = useState(false)
  return <button />
}

JSX हुड के तहत स्वचालित रूप से सही आयात सम्मिलित करता है, इसलिए React के दायरे में कोई आवश्यकता नहीं है।
यह वही है जो डिफ़ॉल्ट निर्यात को सहनीय बनाने के लिए कदम उठाता है। आपको बस उनकी उतनी जरूरत नहीं है।

ईएस मॉड्यूल

उत्साही लोगों के एक छोटे से टुकड़े से परे ईएसएम को तैनात करना चुनौतीपूर्ण है। व्यापक पारिस्थितिकी तंत्र वास्तव में तैयार नहीं है और ऐसे कई तरीके हैं जिनसे विभिन्न उपकरण संयोजनों के साथ चीजें गलत हो जाती हैं। सीजेएस और ईएसएम बातचीत का तरीका बहुत जटिल है, और यह इंटरऑप (और यह कैसे विफल होता है) इन मुद्दों में से अधिकांश का स्रोत है।

तो हमारी वर्तमान सोच यह है कि जब हम ईएसएम जाते हैं, तो हम ईएसएम को पूरी तरह से जाने का प्रयास करना चाहेंगे। कोई सीजेएस बिल्कुल नहीं - या एक संगत विरासत पैकेज में अलग। यह रिएक्ट 17 में नहीं होगा और 18 में इसकी संभावना नहीं है, लेकिन रिएक्ट 19 में प्रयास करना संभव है।

@pika/react के ESM बिल्ड के विकल्प की तलाश करने वाले किसी भी व्यक्ति के लिए, https://github.com/esm-bundle/react और https://github.com/esm-bundle/react-dom देखें। अंतर यह है कि वे ब्राउज़र में एक आयात मानचित्र पॉलीफ़िल के बिना प्रयोग करने योग्य हैं - प्रतिक्रिया-डोम के स्रोत कोड के अंदर import React from 'react'; को एक पूर्ण सीडीएन यूआरएल से रिएक्ट आयात करने के लिए बदल दिया जाता है। एक और अंतर यह है कि जब भी कोई नया प्रतिक्रिया संस्करण प्रकाशित होता है, तो नए संस्करण स्वत: प्रकाशित हो जाते हैं, बिना किसी मैनुअल चरणों के।

कोड सैंडबॉक्स प्रदर्शित करता है: https://codesandbox.io/s/gifted-roentgen-qcqoj?file=/index.html

कुछ लोगों ने इस धारणा को चुनौती दी है कि पारिस्थितिकी तंत्र तैयार नहीं है। मेरे पास इस पर पूरा संदर्भ नहीं है, लेकिन अगर आपको लगता है कि बदलाव शुरू करने का यह एक अच्छा समय है, तो मुझे खुशी होगी अगर आप https://github.com/reactjs/rfcs/pull/38 को देख सकते हैं और किसी को भी व्यक्त कर सकते हैं। इसके बारे में चिंतित हैं। क्या यह मोटे तौर पर आपके मन में था, या आप एक अलग दृष्टिकोण पसंद करेंगे?

लेकिन यहाँ किकर है। रिएक्ट को आयात करने के लिए वास्तव में बहुत अधिक कारण नहीं होंगे।

ऐसा है यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, और निकट भविष्य के लिए इसे जारी रखेंगे। जब तक टीएस बेबेल के इस नए जादुई व्यवहार के बारे में नहीं जान लेता, तब तक डेवलपर्स को रिएक्ट को स्पष्ट रूप से आयात करना जारी रखना होगा, और उन्हें यह जानना होगा कि सही आयात विवरण क्या है।

JSX हुड के तहत स्वचालित रूप से सही आयात सम्मिलित करता है, इसलिए दायरे में प्रतिक्रिया की कोई आवश्यकता नहीं है।

s/JSX/नया बेबेल प्रतिक्रिया jsx प्लगइन/. JSX जावास्क्रिप्ट का सिंटैक्स एक्सटेंशन है, यह अपने आप में कुछ नहीं करता है।

ऐसा है यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, और निकट भविष्य के लिए इसे जारी रखेंगे। जब तक टीएस बेबेल के इस नए जादुई व्यवहार के बारे में नहीं जान लेता, तब तक डेवलपर्स को रिएक्ट को स्पष्ट रूप से आयात करना जारी रखना होगा, और उन्हें यह जानना होगा कि सही आयात विवरण क्या है।

टाइपस्क्रिप्ट टीम इस बदलाव से अवगत है, और इसे https://github.com/microsoft/TypeScript/issues/34547 में ट्रैक किया जा रहा है

s/JSX/नई बेबल प्रतिक्रिया jsx ट्रांस्फ़ॉर्म प्लगइन/

हाँ, मेरा यही मतलब था!

यदि आप रिएक्टज/आरएफसीएस#38 को देख सकते हैं और इसके बारे में कोई चिंता व्यक्त कर सकते हैं तो मुझे खुशी होगी। क्या यह मोटे तौर पर आपके मन में था, या आप एक अलग दृष्टिकोण पसंद करेंगे?

RFC का कुछ मूल पाठ पुराना है। NodeJS ईएसएम में चलाने के लिए अनुमति देता है .js के बजाय फाइलों .mjs अब, जब आप एक निर्दिष्ट "type" आपके package.json में। ( दस्तावेज़ )।

विशेष रूप से, आरएफसी मूल पाठ निम्नलिखित कहता है जो सत्य नहीं है:

ESM कोड .mjs फ़ाइल के अंदर होना चाहिए

@frehner के साथ बात करने के बाद, यहां हमारा प्रस्ताव है कि कैसे रिएक्ट को ईएसएम में वृद्धिशील रूप से परिवर्तित किया जा सकता है। ध्यान दें कि हम रिएक्ट के ईएसएम संस्करण को प्रकाशित करने के साथ नामित/डिफ़ॉल्ट निर्यात समस्या को नहीं जोड़ते हैं। @gaearon ने स्पष्ट किया है कि डिफ़ॉल्ट निर्यात अंततः समाप्त हो जाएगा, लेकिन यह चरण 4 तक हमारे प्रस्ताव में सूचीबद्ध नहीं है।

| | चरण 1 | चरण 2 | चरण 3 | चरण 4 |
| - | -------- | -------- | -------- | ------- |
| ईएसएम प्रकाशित हो चुकी है।. | ✔️ | ✔️ | ✔️ | ✔️ |
| package.json "module" | | ✔️ | ✔️ | ✔️ |
| वेबपैक/रोलअप ईएसएम ^{1 , 2 का} उपयोग करें | | ✔️ | ✔️ | ✔️ |
| package.json "exports" | | | ✔️ | ✔️ |
| package.json "type" | | | ✔️ | ✔️ |
| NodeJS ईएसएम का उपयोग करता है | | | ✔️ | ✔️ |
| ब्रेकिंग चेंज? | | | | ✔️ |
| डिफ़ॉल्ट निर्यात चला गया? | | | | ✔️ |
| आयात में आवश्यक फ़ाइल एक्सटेंशन | | | | |
| mjs फ़ाइल एक्सटेंशन | | | | |

मुझे लगता है कि चरण 1 और चरण 2 को एक साथ मिलाने के लिए एक वैध तर्क है, क्योंकि चरण 1 वास्तव में केवल उत्साही लोगों को लक्षित करता है। हालांकि, मैंने उन्हें विभाजित किया क्योंकि मुझे लगता है कि चरणों को अलग करने से ईएसएम को इस तरह से धीरे-धीरे रोल आउट करने का मौका मिलता है जो सीआरए और पूरे पारिस्थितिकी तंत्र को तुरंत नहीं तोड़ता है, बिना शुरुआती अपनाने वालों को मुद्दों की रिपोर्ट करने और कोई सुधार खोजने का मौका देता है। .

@joeldenning चरणों का कठिन समय क्या होगा? क्या यह सिर्फ समय-आधारित है या वे पारिस्थितिकी तंत्र में कुछ समय की चौकियों से संबंधित हैं? क्या require('react') अभी भी तीसरे चरण में काम करेगा?

चरणों का कठिन समय क्या होगा? क्या यह सिर्फ समय-आधारित है या वे पारिस्थितिकी तंत्र में कुछ समय की चौकियों से संबंधित हैं?

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

आवश्यकता होगी ('प्रतिक्रिया') अभी भी चरण 3 में काम करती है?

हाँ मैं यही सोचता हूँ। https://nodejs.org/api/esm.html#esm_dual_commonjs_es_module_packages और https://nodejs.org/api/esm.html#esm_package_entry_points देखें। यह निश्चित रूप से बहुत संभव है कि मैं हर चीज के लिए सभी कोने के मामलों को नहीं जानता, लेकिन मेरी समझ यह है कि मैंने जो संक्रमण पथ प्रस्तावित किया है वह "हर जगह काम करेगा।" शायद वे प्रसिद्ध अंतिम शब्द हैं

एक अतिरिक्त स्पष्टीकरण, यहाँ हम प्रस्तावित कर रहे हैं कि प्रकाशित टारबॉल प्रतिक्रिया के लिए कैसा दिखेगा:

node_modules/react/
  cjs/
    react.development.js
    react.production.min.js
    react.profiling.min.js
  umd/
    react.development.js
    react.production.min.js
    react.profiling.min.js
  esm/
    react.development.js
    react.production.min.js
    react.profiling.min.js
  index.js

और यहाँ एक अनुमान है कि package.json अंत में क्या होगा:

{
  "type": "module",
  "main": "index.js",
  "module": "esm/react.development.js",
  "exports": {
    "import": "./esm/react.development.js",
    "require": "./cjs/react.development.js"
  }
}

^ यह पूरी तरह से सोचा और सिद्ध नहीं है, लेकिन मैं प्रस्ताव को ठोस संदर्भ देने के लिए साझा कर रहा हूं।

तो - प्रतिक्रिया दोहरे पैकेज के खतरे से ग्रस्त है क्योंकि यह स्टेटफुल (हुक) है, इसलिए इस राज्य को सावधानीपूर्वक अलग करना होगा। या तो इसे एक छोटी सीजेएस फ़ाइल में रहना चाहिए जिसे सीजेएस और ईएसएम दोनों प्रविष्टियों द्वारा आयात किया जा सकता है या शायद .json लोड करने का एक तरीका है और इसे दोनों प्रविष्टियों से उस स्थिति के साथ बदल दें (मैं इसके बारे में 100% निश्चित नहीं हूं दूसरा दृष्टिकोण)।

मुझे यह भी लगता है कि नामित निर्यात जोड़कर अपनी तालिका में सूचीबद्ध करना महत्वपूर्ण है, जो पहले से ही चरण 1 में होगा।

मुझे अभी भी 100% यकीन नहीं है कि अगर मैंने कुछ कोने के मामलों को याद नहीं किया है, तो यह विषय बहुत जटिल है। साथ ही, शेड्यूल को पारिस्थितिक तंत्र की चौकियों से जोड़ा जाना चाहिए - चरण 3 को केवल तभी शिप किया जा सकता है जब exports पास बंडलर में पर्याप्त समर्थन हो, अन्यथा मुझे लगता है कि इससे संभावित समस्याएं हो सकती हैं।

रिएक्ट दोहरे पैकेज के खतरे से ग्रस्त है क्योंकि यह स्टेटफुल (हुक) है, इसलिए इस राज्य को सावधानीपूर्वक अलग करना होगा।

अच्छा बिंदु, मैंने इसे ( अधिक जानकारी ) नहीं माना था। उस स्थिति में, शायद CJS/ESM बिल्ड के बीच साझा फ़ाइल का आपका सुझाव उपयोगी होगा। या शायद ESM संस्करण प्रतिक्रिया की पूरी प्रति नहीं है, बल्कि केवल ESM सार्वजनिक इंटरफ़ेस है जो CJS बिल्ड में कॉल करता है।

मुझे यह भी लगता है कि नामित निर्यात जोड़कर अपनी तालिका में सूचीबद्ध करना महत्वपूर्ण है, जो पहले से ही चरण 1 में होगा।

ऐसा लगता है कि यह पहले से ही मामला है, हालांकि, स्रोत कोड में? मैं जो बता सकता हूं, स्रोत कोड पहले से ही निर्यात के रूप में चीजों को निर्यात करता है।

https://github.com/facebook/react/blob/ef22aecfc52cdf0d7cedc723c590719c009c2a64/packages/react/index.js#L39

https://github.com/facebook/react/blob/ef22aecfc52cdf0d7cedc723c590719c009c2a64/packages/react/index.js#L39

मुझे अभी भी 100% यकीन नहीं है कि अगर मैंने कुछ कोने के मामलों को याद नहीं किया है, तो यह विषय बहुत जटिल है। साथ ही, शेड्यूल को पारिस्थितिक तंत्र चौकियों से जोड़ा जाना चाहिए - चरण 3 को केवल तभी शिप किया जा सकता है जब निर्यात के पास बंडलर में पर्याप्त समर्थन हो, अन्यथा मुझे लगता है कि इससे संभावित समस्याएं हो सकती हैं।

चरण 3 के बारे में सहमत - यही कारण है कि मैंने एक प्रश्न चिह्न लगाया कि क्या यह एक ब्रेकिंग बदलाव था। मुझे पता है कि package.json निर्यात जोड़ना अक्सर पारिस्थितिकी तंत्र में अन्य पैकेजों के लिए एक महत्वपूर्ण बदलाव रहा है। और विषय निश्चित रूप से जटिल है। एक बात ध्यान देने योग्य है कि चरण 3 और 4 के क्रम को वांछित होने पर बदला जा सकता है। मुझे लगता है कि प्रत्येक चरण को लागू करने वालों को वेबपैक, रोलअप, नोडज आदि के कई संस्करणों का बहुत गहन परीक्षण करना होगा। मैं यह नहीं कह रहा हूं कि किया जाने वाला काम तुच्छ है - बस यह कह रहा हूं कि मुझे लगता है कि वहां संभवतः यहाँ एक संक्रमण मार्ग है :)

ऐसा लगता है कि यह पहले से ही मामला है, हालांकि, स्रोत कोड में? मैं जो बता सकता हूं, स्रोत कोड पहले से ही निर्यात के रूप में चीजों को निर्यात करता है।

आह - ठीक है, इस मामले में export default जोड़ने के लिए एक टेबल पंक्ति होनी चाहिए क्योंकि यह वर्तमान में अधिकांश बंडलर में काम करती है और जंगली में लोकप्रिय है, लेकिन default प्रदान किए बिना सही ईएसएम प्रविष्टि जोड़ना होगा उन उपयोगों को तोड़ो।

इस मामले में निर्यात डिफ़ॉल्ट जोड़ने के लिए एक तालिका पंक्ति होनी चाहिए

हाँ, अच्छा बिंदु। मैं इसे जोड़ दूंगा। मुझे लगता है कि ऐसा करने वाला एक पीआर "बुरा प्रतीत होगा," लेकिन मैं इसे भविष्य में सुधार की योजनाओं के साथ वर्तमान सार्वजनिक इंटरफ़ेस को स्वीकार करने के रूप में देखता हूं।

हमें ध्यान देना चाहिए कि जैसे ही कुछ संस्करण प्रकाशित होता है, कोई पीछे नहीं हटता है और इसमें कोई भी शब्दार्थ परिवर्तन टूट जाएगा। यह देखते हुए कि हम बहुत बार बड़ी कंपनियों को जारी नहीं करते हैं, हमें इस बात पर विचार करना चाहिए कि किसी भी बदलाव को कैसे बैचें ताकि कम से कम मंथन हो।

एक सवाल यह भी है कि विकास/उत्पादन निर्माण विभाजन को कैसे संभाला जाएगा। और वास्तव में, रिएक्ट बिल्ड की स्टेटफुल प्रकृति संरक्षित करने के लिए बहुत महत्वपूर्ण है।

हमें ध्यान देना चाहिए कि जैसे ही कुछ संस्करण प्रकाशित होता है, कोई पीछे नहीं हटता है और इसमें कोई भी शब्दार्थ परिवर्तन टूट जाएगा। यह देखते हुए कि हम बहुत बार बड़ी कंपनियों को जारी नहीं करते हैं, हमें इस बात पर विचार करना चाहिए कि किसी भी बदलाव को कैसे बैचें ताकि कम से कम मंथन हो।

अच्छे अंक। मेरा विचार एक ईएसएम बिल्ड में एक स्पष्ट export default React जोड़ना है जो रिएक्ट 16 में प्रकाशित होता है। मुझे लगता है कि पीआर कुछ भौहें उठा सकता है और विवादास्पद हो सकता है, क्योंकि यह वह गंतव्य नहीं है जिस पर निर्णय लिया गया है। हालाँकि, मेरा विचार है कि हम रिएक्ट 16 में एक ESM बिल्ड कर सकते हैं और फिर भविष्य के प्रमुख संस्करण में export default को हटा सकते हैं। मेरे लिए, import React from 'react'; माध्यम से प्रतिक्रिया का उपयोग करना इतना आम है कि ईएसएम बिल्ड में डिफ़ॉल्ट निर्यात करना केवल "हम जहां हैं उसे स्वीकार करना" है। भविष्य का एक प्रमुख संस्करण इसे हटा देगा।

ब्रेकिंग परिवर्तनों को कम करने से भी संबंधित - चरण 3 और 4 उसी प्रमुख रिलीज का हिस्सा हो सकते हैं। यह संभव है कि चरण 3 पूरी तरह से पीछे की ओर संगत तरीके से किया जा सकता है, इस मामले में यह 16 रिलीज में भी घुस सकता है। लेकिन वह अधिक पेचीदा है और मुझे उस पर विश्वास करने के लिए इसके बारे में पर्याप्त जानकारी नहीं है।

एक सवाल यह भी है कि विकास/उत्पादन निर्माण विभाजन को कैसे संभाला जाएगा।

यह कुछ ऐसा है जिसकी मैंने अनदेखी की है। मुझे नहीं पता कि बंडलर और नोडजेएस दोनों में ईएसएम के साथ इसे कैसे करना है, लेकिन यह देखने के लिए कुछ शोध करेंगे कि क्या संभव है। मुझे यह मृत प्रस्ताव मिला, लेकिन जीवित लोगों को देखूंगा :)

और वास्तव में, रिएक्ट बिल्ड की स्टेटफुल प्रकृति संरक्षित करने के लिए बहुत महत्वपूर्ण है।

माना। एक बात ध्यान देने योग्य है कि रिएक्ट बिल्ड की स्टेटफुल प्रकृति को केवल चरण 3 में हल करने की आवश्यकता है, न कि चरण 1 और 2 में। @Andarist और मैंने जो विकल्प सुझाए हैं, वे इसे हल करने के लिए काम करेंगे।

सबसे आसान, अब के लिए सबसे पीछे की ओर संगत दृष्टिकोण नामित आयात के लिए अनुमति देने के लिए एक सरल ईएसएम आवरण जोड़ना है।

मुझे इसे रिएक्ट में जोड़ने के लिए एक पीआर बनाने में खुशी होगी, यह सुनिश्चित करते हुए कि "निर्यात" फ़ील्ड को जोड़ना एक ब्रेकिंग बदलाव नहीं है (मैंने एक टूल लिखा है, npx ls-exports , जो इसे आसान निर्धारित करता है)। यह निर्माण प्रक्रिया के बिना ईएसएम का उपयोग करने की कोशिश कर रहे लोगों की मदद नहीं करेगा, लेकिन यह एक समस्या है कि व्यक्तिगत पैकेज वैसे भी हल करने में सक्षम नहीं हैं।

@gaearon क्या यह उपयोगी होगा? यह रिएक्ट 16 में सेवर-माइनर के रूप में उतर सकता है।

CJS बिल्ड पर्यावरण का पता लगाने का उपयोग करना जारी रखेगा, जैसा कि अब होता है, ताकि ESM में (कठिन, अनसुलझी) समस्या का पता लगाना अभी बाकी है।

हालांकि, मेरा विचार है कि हम रिएक्ट 16 में एक ईएसएम बिल्ड कर सकते हैं और फिर भविष्य के प्रमुख संस्करण में निर्यात डिफ़ॉल्ट को हटा सकते हैं।

एक और चिंता यह है कि विन्यासों की संख्या बढ़ने से पारिस्थितिकी तंत्र पर दबाव पड़ता है। उदाहरण के लिए, मुझे लगता है कि अगर हम ईएसएम बिल्ड जारी करते हैं तो इसमें कुछ ऐसा शामिल नहीं होना चाहिए जिसे हम निश्चित रूप से अगली रिलीज में हटा देंगे, जैसे डिफ़ॉल्ट निर्यात। दूसरे शब्दों में, मुझे नहीं लगता कि यह कुछ ऐसा पेश करने के लिए बहुत मायने रखता है जो दूर जा रहा है (डिफ़ॉल्ट निर्यात) जिसे अभी जोड़ा जा रहा है (ईएसएम बिल्ड)।

हालांकि, मेरा विचार है कि हम रिएक्ट 16 में एक ईएसएम बिल्ड कर सकते हैं और फिर भविष्य के प्रमुख संस्करण में निर्यात डिफ़ॉल्ट को हटा सकते हैं।

एक और चिंता यह है कि विन्यासों की संख्या बढ़ने से पारिस्थितिकी तंत्र पर दबाव पड़ता है। उदाहरण के लिए, मुझे लगता है कि अगर हम ईएसएम बिल्ड जारी करते हैं तो इसमें कुछ ऐसा शामिल नहीं होना चाहिए जिसे हम निश्चित रूप से अगली रिलीज में हटा देंगे, जैसे डिफ़ॉल्ट निर्यात। दूसरे शब्दों में, मुझे नहीं लगता कि यह कुछ ऐसा पेश करने के लिए बहुत मायने रखता है जो दूर जा रहा है (डिफ़ॉल्ट निर्यात) जिसे अभी जोड़ा जा रहा है (ईएसएम बिल्ड)।

मुझे लगता है कि यह इस बात पर निर्भर करता है कि अगली रिलीज कितनी देर तक है। अगर हम एक सप्ताह के अंतर के बारे में बात कर रहे हैं, तो यह उचित लगता है। हालांकि, अगर हम महीनों/वर्षों की बात कर रहे हैं, तो मुझे नहीं लगता कि उस समय के लिए इसे बाहर निकालना बुरा क्यों होगा

इस मामले में चिंता की बात यह है कि यह जितना लंबा होगा, मौजूदा स्वरूप में उतने ही अधिक लोग इस पर निर्भर होंगे। और फिर एक ब्रेकिंग बदलाव की शुरुआत करने से उनके लिए रिएक्ट को अपग्रेड करना और मुश्किल हो जाएगा। अब केवल एक ESM माइग्रेशन नहीं है, बल्कि कई हैं, और कुछ लोग पीछे रह जाएंगे क्योंकि वे बहुत जल्दी कूद गए थे और बाद में उनके पास दूसरे माइग्रेशन के लिए संसाधन नहीं थे। जो, ईएसएम के मामले में, पूरे पारिस्थितिकी तंत्र में तरंगित हो जाएगा।

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

मैं import React from 'react' को कुछ नए जोड़े के रूप में नहीं देखता, बल्कि वर्तमान वास्तविकता की स्वीकृति के रूप में देखता हूं। हालांकि यह शायद अनजाने में हुआ था और अब अप्रचलित ईएसएम/सीजेएस इंटरऑप का केवल एक साइड इफेक्ट है, फिर भी कोड की हजारों (लाखों?) लाइनें हैं जो इसे करती हैं। वैकल्पिक (केवल नामित निर्यात निर्यात) उपयोगकर्ताओं से कहता है "हमने एक मामूली संस्करण में एक ईएसएम बिल्ड प्रकाशित किया है, लेकिन आप अपने सभी कोड को बदले बिना इसका उपयोग नहीं कर सकते हैं" जो मेरे लिए "हटाए गए डिफ़ॉल्ट निर्यात" को देखने से उपयोगकर्ताओं के लिए अधिक भ्रमित है। एक प्रमुख संस्करण के रिलीज नोट्स में।

मैं उत्सुक हूं - डिफ़ॉल्ट निर्यात के साथ ईएसएम को पीछे की ओर संगत तरीके से कैसे जोड़ा जा सकता है? यह पहले भी सामने आया है (उदाहरण के लिए https://github.com/facebook/react/pull/18187 जो संबंधित मुद्दों से भी जुड़ा है)। समस्या यह है के साथ webpack CJS <-> ईएसएम इंटरॉप जहां अगर आप कर CJS कोड है require('react') क्या webpack एक ईएसएम की उपस्थिति में वापस आ जाएगी react एक डिफ़ॉल्ट निर्यात के साथ, के साथ एक वस्तु है default CJS react परवाह किए बिना default संपत्ति (मतलब अब इसे require('react').default )। लेकिन हो सकता है कि अगर आप भी नाम से एक्सपोर्ट करते हैं तो कोई दिक्कत नहीं होगी? मुझे लगता है कि @TrySound पहले भी अन्य पैकेजों में इस तरह के मुद्दों का

लेकिन हो सकता है कि अगर आप भी नाम से एक्सपोर्ट करते हैं तो कोई दिक्कत नहीं होगी?

हां, यही वह दृष्टिकोण है जिसके बारे में मैं सोच रहा हूं। https://unpkg.com/browse/@esm-bundle/react @ 16.13.1/esm/react.Development.js की अंतिम 40 पंक्तियाँ देखें - यह रिएक्ट का एक अनौपचारिक संस्करण है जो वास्तव में ऐसा करता है और कई द्वारा उपयोग किया जाता है आधिकारिक प्रतिक्रिया के लिए ड्रॉप-इन प्रतिस्थापन के रूप में संगठन। कोई ब्रेकिंग परिवर्तन नहीं।

लेकिन हो सकता है कि अगर आप भी नाम से एक्सपोर्ट करते हैं तो कोई दिक्कत नहीं होगी?

हां, यही वह दृष्टिकोण है जिसके बारे में मैं सोच रहा हूं। https://unpkg.com/browse/@esm-bundle/react @ 16.13.1/esm/react.Development.js की अंतिम 40 पंक्तियाँ देखें - यह रिएक्ट का एक अनौपचारिक संस्करण है जो वास्तव में ऐसा करता है और कई द्वारा उपयोग किया जाता है आधिकारिक प्रतिक्रिया के लिए ड्रॉप-इन प्रतिस्थापन के रूप में संगठन। कोई ब्रेकिंग परिवर्तन नहीं।

लेकिन क्या आप इसका सेवन सीजेएस कोड या ईएसएम से कर रहे हैं? क्योंकि यह सीजेएस <-> ईएसएम इंटरऑप मुद्दे हैं जो बहुत आश्चर्यजनक हो सकते हैं।

@gaearon स्पष्ट होना; यह समझ में आता है कि मेरे द्वारा प्रस्तावित ईएसएम रैपर में कोई डिफ़ॉल्ट निर्यात नहीं है; मूल ईएसएम करने वाला कोई भी व्यक्ति इसके आसपास काम करने के लिए import * as React from 'react' करेगा। हालाँकि, यह उचित है कि अब ऐसा करने वाला कोई भी व्यक्ति इसे एक ब्रेकिंग परिवर्तन के रूप में देख सकता है कि अचानक डिफ़ॉल्ट निर्यात नहीं है, इसलिए यदि आप अभी डिफ़ॉल्ट नहीं जोड़ना चाहते हैं तो इसे v17 तक इंतजार करना होगा।

लेकिन क्या आप इसका सेवन सीजेएस कोड या ईएसएम से कर रहे हैं? क्योंकि यह सीजेएस <-> ईएसएम इंटरऑप मुद्दे हैं जो बहुत आश्चर्यजनक हो सकते हैं।

मैंने इसे सीजेएस और ईएसएम दोनों फाइलों से वेबपैक में सफलतापूर्वक आयात किया है।

देशी ईएसएम करने वाला कोई भी व्यक्ति इसके आसपास काम करने के लिए 'प्रतिक्रिया' से प्रतिक्रिया के रूप में आयात * करेगा। हालाँकि, यह उचित है कि अब ऐसा करने वाला कोई भी व्यक्ति इसे एक ब्रेकिंग बदलाव के रूप में देख सकता है कि अचानक डिफ़ॉल्ट निर्यात नहीं है, इसलिए यदि आप अभी डिफ़ॉल्ट नहीं जोड़ना चाहते हैं तो इसे v17 तक इंतजार करना होगा।

माना। यदि खरोंच से शुरू हो रहा है, तो डिफ़ॉल्ट निर्यात करने की कोई आवश्यकता नहीं होगी। हालांकि, एक डिफ़ॉल्ट निर्यात को जोड़े बिना, चरण 2 को लागू करना संभव नहीं है, यह एक ब्रेकिंग बदलाव नहीं है। मैं व्यक्तिगत रूप से प्रतिक्रिया 16 में चरण 1 और प्रतिक्रिया 17+ में चरण 2-4 करने के साथ ठीक हो जाऊंगा, हालांकि मेरी प्राथमिकता चरण 1, 2, और शायद 3 भी करना है ( @ljharb के निर्यात चेकर टूल की मदद से) प्रतिक्रिया 16 में परिवर्तन को तोड़े बिना। इसका कारण यह है कि चरण 2 बड़ा है जहां अधिकांश उपयोगकर्ता ईएसएम बंडल का उपयोग करना शुरू करते हैं, जबकि चरण 1 ज्यादातर शुरुआती अपनाने वाले / उत्साही लोगों के लिए है।

इस प्रस्ताव से आगे बढ़ते हुए। यह पूर्ण सीजेएस और ईएसएम स्रोत के साथ दोहरे पैकेज पर स्विच करने का एक प्रस्ताव प्रतीत होता है, जो राज्य को कहीं और अलग करके दोहरे पैकेज के खतरे से निपटता है ( दृष्टिकोण 2 )। मेरे पिछले RFC ( दृष्टिकोण 1 ) की तरह एक ESM आवरण का उपयोग करने के विरोध में।

यह मानते हुए, मेरे पास उन चीजों के कुछ नोट हैं जिनका अभी तक उल्लेख नहीं किया गया है।

• आपके पास एक Node.js पैकेज नहीं हो सकता है जहाँ ESM और CommonJS दोनों फ़ाइलें .js । यदि आप "type": "module" सेट करते हैं तो सभी CommonJS फ़ाइलों को इसके बजाय .cjs फ़ाइल एक्सटेंशन का उपयोग करने की आवश्यकता होती है।
• सीजेएस और ईएसएम दोनों के साथ राज्य और समानता दोहरे पैकेज का खतरा एकमात्र मुद्दा नहीं है। एक ही पैकेज के संभावित रूप से 2 संस्करण लोड होने से उन मामलों में रिएक्ट की मेमोरी फ़ुटप्रिंट भी बढ़ जाती है, और रिएक्ट एक छोटी लाइब्रेरी नहीं है। यह डील ब्रेकर नहीं है, लेकिन यह ध्यान में रखने योग्य है।
• मुझे रिएक्ट की आंतरिक स्थिति के अलावा दोहरे पैकेज के खतरे की संभावना दिखाई देती है। उदाहरण के लिए यदि Component वर्ग का कार्यान्वयन सीजेएस कोड का हिस्सा नहीं है जहां हम राज्य साझा करते हैं और इसके बजाय सीजेएस/ईएसएम बंडलों का हिस्सा है तो विभिन्न पुस्तकालयों में instanceof Component चेक का जोखिम है टूटने के।

आपके पास एक Node.js पैकेज नहीं हो सकता है जहाँ ESM और CommonJS दोनों फ़ाइलें .js का उपयोग करती हैं। यदि आप "टाइप": "मॉड्यूल" सेट करते हैं तो सभी कॉमनजेएस फाइलों को इसके बजाय .cjs फाइल एक्सटेंशन का उपयोग करने की आवश्यकता होती है।

यह सच NodeJS के लिए (लेकिन bundlers के लिए नहीं), इसलिए में फ़ाइलों है cjs निर्देशिका के साथ समाप्त करने के लिए होगा .cjs ।

एक ही पैकेज के संभावित रूप से 2 संस्करण लोड होने से उन मामलों में रिएक्ट की मेमोरी फ़ुटप्रिंट भी बढ़ जाती है

मैं देखता हूं कि यह एनपीएम तक प्रकाशित टैरबॉल आकार को कैसे बढ़ाता है, और इस प्रकार डिस्क पर समग्र आकार। लेकिन मैं यह नहीं देखता कि यह स्मृति को कैसे प्रभावित करता है। जहां तक ​​​​मुझे पता है, बंडलर और नोडजेएस स्मृति में कोड नहीं लाते हैं जो import / require() माध्यम से लोड नहीं किया गया है। क्या आप स्पष्ट कर सकते हैं कि स्मृति पदचिह्न कैसे बदलेगा?

उदाहरण के लिए यदि घटक वर्ग का कार्यान्वयन सीजेएस कोड का हिस्सा नहीं है जहां हम राज्य साझा करते हैं और इसके बजाय सीजेएस/ईएसएम बंडलों का हिस्सा हैं तो विभिन्न पुस्तकालयों में घटक जांच के उदाहरण का जोखिम है।

एक प्रस्तावित समाधान ( 1 , 2 ) यह है कि NodeJS esm कार्यान्वयन केवल एक ESM इंटरफ़ेस हो जो CJS कोड में कॉल करता हो। इस तरह Component केवल एक परिभाषा है जो कभी भी Node. चरण 1 और चरण 2 NodeJS में जो चलता है उसे नहीं बदलेगा, हालांकि, यह केवल चरण 3 पर लागू होगा।

जैसा कि हमने (वेबपैक) ने हाल ही में वेबपैक 5 में exports फील्ड सपोर्ट भी जोड़ा है, मैं इस विषय पर अपना 2 सेंट देना चाहता हूं:

• इस वर्क-इन-प्रोसेस दस्तावेज़ में वेबपैक के बारे में exports फ़ील्ड के बारे में बहुत सारी जानकारी है, लेकिन Node.js और सामान्य तौर पर: https://gist.github.com/sokra/e032a0f17c1721c71cfced6f14516c62
• Node.js की तुलना में ये मुख्य बिंदु हैं:
  
  
  
  • वेबपैक 5 development और production शर्तों को भी जोड़ता है, जो प्रतिक्रिया के लिए बहुत उपयोगी हैं। ( process.env.NODE_ENV , जबकि अभी भी समर्थित है, सामान्य रूप से फ्रंटएंड कोड के लिए बचा जाना चाहिए, यह Node.js विशिष्ट है)
  
  
  • वेबपैक (और अन्य बंडलर) require("esm") का समर्थन करता है, जो हमेशा ईएसएम (यहां तक ​​कि require() ) का उपयोग करके दोहरी स्थिति की समस्या से बचने की अनुमति देता है। वेबपैक ने इसके लिए एक विशेष शर्त पेश की है: module । इसके लिए CommonJs और ESM संस्करण को समान इंटरफ़ेस निर्यात करना होगा। वर्तमान में Node.js की तुलना में दोहरी-राज्य-समस्या वाली कोई अन्य चीज़ नहीं है। मुझे उम्मीद नहीं है कि हम भविष्य में कुछ देखेंगे, क्योंकि यह ज्यादातर पिछड़ी-संगत समस्या है।
    
    अधिकतम अनुकूलता के लिए मैं निम्नलिखित की सिफारिश करूंगा:
  
  

पैकेज.जेसन

{
    "type": "commonjs",
    "main": "index.js",
    "module": "esm/wrapper.js",
    "exports": {
        ".": {
            "node": {
                "development": {
                    "module": "./esm/index.development.js",
                    "import": "./esm/wrapper.development.js",
                    "require": "./cjs/index.development.js"
                },
                "production": {
                    "module": "./esm/index.production.min.js",
                    "import": "./esm/wrapper.production.min.js",
                    "require": "./cjs/index.production.min.js"
                },
                "import": "./esm/wrapper.js",
                "default": "./cjs/index.js"
            },
            "development": "./esm/index.development.js",
            "production": "./esm/index.production.min.js",
            "default": "./esm/index.production.min.js"
        },
        "./index": "./index.js",
        "./index.js": "./index.js",
        "./umd/react.development": "./umd/react.development.js",
        "./umd/react.development.js": "./umd/react.development.js",
        "./umd/react.production.min": "./umd/react.production.min.js",
        "./umd/react.production.min.js": "./umd/react.production.min.js",
        "./umd/react.profiling.min": "./umd/react.profiling.min.js",
        "./umd/react.profiling.min.js": "./umd/react.profiling.min.js",
        "./package.json": "./package.json"
    }
}

ईएसएम/पैकेज.जेसन

इन निर्देशिकाओं में विस्तार के रूप में .js का उपयोग करने की अनुमति देता है। वैकल्पिक रूप से .mjs का उपयोग किया जा सकता है, लेकिन जब उपकरण एक्सटेंशन की जांच करते हैं तो इसके संभावित दुष्प्रभाव हो सकते हैं। तो सुरक्षित रहने के लिए .js ।

{
    "type": "module"
}

esm/wrapper.js

दोहरे राज्य की समस्या से बचने के लिए Node.js के लिए यह आवरण आवश्यक है।

import React from "../cjs/index.js";
export const {
    Children,
    Component,
    ...,
    useState,
    version
} = React;
export { React as default };

सीजेएस/index.js

इसका उपयोग Node.js द्वारा किया जाता है जब development और production शर्तें समर्थित नहीं होती हैं।

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

esm/wrapper.development.js (esm/wrapper.production.min.js समान)

दोहरे राज्य की समस्या से बचने के लिए Node.js के लिए इन आवरणों की आवश्यकता होती है।
उनका उपयोग केवल एक बार किया जाता है जब Node.js development और production शर्तों को जोड़ता है।

import React from "../cjs/index.development.js";
export const {
    Children,
    Component,
    ...,
    useState,
    version
} = React;
export { React as default };

index.js

पिछड़े-संगत के लिए।

module.exports = require('./cjs/index.js');

esm/index.development.js, esm/index.production.min.js

इसका उपयोग उन उपकरणों द्वारा किया जाता है जो exports फ़ील्ड, module स्थिति और production / development शर्तों का समर्थन करते हैं।

/* React in ESM format */

// compat for the default exports with support for tree-shaking
import * as self from "./esm/index.development.js";
export { self as default }

परिणाम

• वेबपैक 5: ./esm/index.development.js या ./esm/index.production.min.js
• ब्राउज़राइज़ करें: ./cjs/index.js
• .mjs से वेबपैक 4: ./cjs/index.js
• अन्य बंडलर: ./esm/wrapper.js
• Node.js (ESM): ./cjs/index.js (आवश्यकता) या ./esm/wrapper.js (आयात)
• Node.js (पुराना): ./cjs/index.js
• Node.js (ESM + dev/prod): ./esm/wrapper.development.js या ./esm/wrapper.production.min.js आयात के लिए, ./cjs/index.development.js या ./cjs/index.production.min.js आवश्यकता के लिए

टिप्पणियाँ

कोई esm/index.js नहीं है क्योंकि ईएसएम में बड़े ट्रेड-ऑफ के बिना सशर्त रूप से एक संस्करण चुनना संभव नहीं है।
उपकरण केवल प्रतिक्रिया ESM से पूरी तरह लाभान्वित हो सकते हैं जब वे exports फ़ील्ड, module स्थिति (दोहरी स्थिति की समस्या के कारण) और production / development शर्तें (सशर्त आयात समस्या के कारण)।

जब वे module फ़ील्ड या exports फ़ील्ड का समर्थन करते हैं, तो उपकरण प्रतिक्रिया ESM से आंशिक रूप से लाभान्वित हो सकते हैं।

import { useState } from "react" या import * as React from "react" तकनीकी रूप से अवैध हैं क्योंकि लंबी प्रतिक्रिया एक कॉमनज मॉड्यूल है।
अधिकांश टूलिंग अभी भी पिछड़े-संगत के लिए इसका समर्थन करते हैं, लेकिन कुछ नहीं करते हैं, जैसे Node.js
तो वर्तमान में प्रतिक्रिया का उपयोग करने का एकमात्र तरीका है जो हर जगह मान्य है: import React from "react" ।
इस तरह से समर्थित रहना चाहिए, अन्यथा ऐसे मामले होंगे (जैसे Node.js 14) जहां कोई सिंटैक्स नहीं है जो अब प्रतिक्रिया में मान्य है और ESM जोड़ने के बाद प्रतिक्रिया करता है।

Node.js ने अभी के लिए exports लिए development / production शर्त जोड़ने को अस्वीकार कर दिया है।
यह दुख की बात है, और मुझे अब भी सबसे अच्छी उम्मीद है कि वे अंततः इसे जोड़ देंगे।
इसलिए उसके लिए ऊपर के exports फ़ील्ड में समर्थन तैयार किया गया है।

@ सोकरा शानदार ब्रेकडाउन, बहुत मददगार, धन्यवाद!

एक छोटा सा सवाल:

Node.js ने अभी के लिए निर्यात के लिए विकास/उत्पादन की स्थिति को जोड़ने को अस्वीकार कर दिया है।

मेरी समझ यह है कि इस पर अभी भी काम किया जा रहा है? https://github.com/nodejs/node/pull/33171 लेकिन शायद मैं गलत समझ रहा हूं कि PR

[संपादित करें] मेरे द्वारा लिंक किए गए उपरोक्त पीआर को https://github.com/nodejs/node/pull/34637 द्वारा हटा दिया गया था।

[संपादित करें 2] और अब इसे नोडज में मिला दिया गया है

धन्यवाद @sokra , वे बहुत उपयोगी सुझाव हैं।

यहां वे विकल्प हैं जो मैं देख रहा हूं। ऐसा लगता है कि वे सभी तकनीकी रूप से संभव हैं, और यह निर्णय तकनीकी कार्यान्वयन से अधिक रणनीति में से एक है:

विकल्प 1

रिएक्ट 17 ईएसएम बिल्ड में export default React जोड़ें, और import React from 'react' लिए सीजेएस समर्थन छोड़ने के बाद इसे हटा दें (शायद रिएक्ट 18 में?)

विकल्प 2

export default React न जोड़ें, और केवल नामित निर्यात के साथ एक React 17 ESM बिल्ड बनाएं।

विकल्प 3

रिएक्ट 17 ईएसएम बिल्ड प्रकाशित न करें। (😢) ESM बिल्ड बनाने से पहले import React from 'react'; समर्थन समाप्त होने तक प्रतीक्षा करें।

तुलना

| | विकल्प 1 | विकल्प 2 | विकल्प 3 |
| - | -------- | -------- | -------- |
| गैर-संदर्भित ईएसएम बिल्ड | v17 | v17 | v18+ |
| package.json "मॉड्यूल" (डिफ़ॉल्ट रूप से हिलता हुआ पेड़) | v17 | v18+ | v18+ |
| package.json "प्रकार" / "निर्यात" (नोडजेएस ईएसएम का उपयोग करता है) | v18+ ¹ | v18+ | v18+ |

1. package.json प्रकार/निर्यात को पूरी तरह से पीछे की ओर संगत तरीके से कार्यान्वित करना संभव हो सकता है, इस मामले में यदि विकल्प 1 चुना जाता है तो यह प्रतिक्रिया 17 का हिस्सा हो सकता है।

मेरी प्राथमिकता विकल्प 1 की ओर है, जैसा कि मैंने ऊपर बताया है। हालांकि, विकल्प 2 भी मेरे लिए काफी रोमांचक है। विकल्प 3 निश्चित रूप से कम रोमांचक है। इस जीथब मुद्दे में मैंने जो कुछ भी इकट्ठा किया है, उसमें से किसी को भी (और शायद श्रम भी!) करने के लिए हमारे पास तकनीकी विशेषज्ञता है।

इस मुद्दे पर शुरुआती प्रतिक्रिया थी, 3 साल बाद भी यह मुद्दा खुला क्यों है? इसके कुछ भाग को पढ़ने के बाद समझ में आता है कि इसमें इतना समय क्यों लग रहा है। रिएक्ट जैसी लाइब्रेरी को मेंटेन करना बहुत बड़ा काम है। तो

रिएक्ट 17 के साथ हाल की खबरों को देखते हुए, मैंने भविष्य की किसी भी योजना के लिए 16 के बजाय रिएक्ट 17 को संदर्भित करने के लिए अपनी पिछली टिप्पणी को अपडेट किया है।

मैं ऊपर दिए गए तीन विकल्पों में से कौन सा विकल्प पसंद किया जाता है, इस पर लोगों की प्रतिक्रिया की सराहना करता हूं।

मुझे लगता है कि हम रिएक्ट 17 में exports फ़ील्ड को package.json में जोड़ सकते हैं, हम शायद इसे पिछले संस्करणों में भी बैकपोर्ट कर सकते हैं:

{
  "exports": {
    ".": {
      "development": "./esm/react.development.mjs",
      "production": "./esm/react.production.mjs",
      "node": {
        "import": "./esm/react.node.mjs",
        "require": "./index.js"
      },
      "default": "./index.js"
    },
    "./jsx-dev-runtime": {
      "development": "./esm/react-jsx-dev-runtime.development.mjs",
      "production": "./esm/react-jsx-dev-runtime.production.mjs",
      "node": {
        "import": "./esm/react-jsx-dev-runtime.node.mjs",
        "require": "./jsx-dev-runtime.js"
      },
      "default": "./jsx-dev-runtime.js"
    },
    "./jsx-runtime": {
      "development": "./esm/react-jsx-runtime.development.mjs",
      "production": "./esm/react-jsx-runtime.production.mjs",
      "node": {
        "import": "./esm/react-jsx-runtime.node.mjs",
        "require": "./jsx-runtime.js"
      },
      "default": "./jsx-runtime.js"
    },
    "./": "./"
  },
}

हमें नए esm बंडलों की आवश्यकता होगी, हालांकि इसे रोलअप के साथ जोड़ना बहुत कठिन नहीं होना चाहिए।

• ./esm/react.development.mjs और ./esm/react.production.mjs बंडल process.env.NODE_ENV चेक से मुक्त होने चाहिए:
  
  
  
  • शर्त का समाधान exports फ़ील्ड के माध्यम से आयात/बंडल समय पर किया जाता है।
  
  
  • process एक नोड एपीआई है, ब्राउज़र वातावरण में इसका कोई मतलब नहीं है, और उदाहरण के लिए वेबपैक 5 द्वारा _default_ द्वारा समर्थित नहीं है।
  
  
• ./esm/react.node.mjs process.env.NODE_ENV चेक रखता है।
  
  
  
  • मुझे नहीं पता कि नोड की तरफ बड़े बंडल होना मायने रखता है या नहीं।
  
  
  • उपयोगकर्ता अभी भी --conditions CLI ध्वज के माध्यम से देव/उत्पाद बंडलों में ऑप्ट-इन कर सकते हैं:
  
  
  • https://nodejs.org/dist/latest-v15.x/docs/api/packages.html#packages_resolving_user_conditions
  
  
• AFAIK केवल वेबपैक 5 और नोड अभी exports फ़ील्ड का समर्थन करते हैं।
  
  
  
  • रोलअप पक्ष में भी इसका समर्थन करने के लिए कुछ रुचि है: https://github.com/rollup/plugins/issues/362
  
  

मुझे लगता है कि यह जोड़ने के लिए सुरक्षित है, WDYT?

https://webpack.js.org/guides/package-exports/
https://nodejs.org/dist/latest-v15.x/docs/api/packages.html

"./": "./" इसे सुरक्षित बनाता है, हां, लेकिन किसी भी एनकैप्सुलेशन को भी रोकता है, इसलिए जैसे ही आपके पास एक सेवर-मेजर था, आप उसे हटाना चाहेंगे।

FWIW बेबेल नए jsx रनटाइम आयात को इस प्रकार आउटपुट करता है:

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

लेकिन अगर आप नोड में इस तरह के मॉड्यूल को लोड करते हैं, तो यह फ़ाइल एक्सटेंशन की कमी के बारे में शिकायत करेगा:

> node .\node.mjs
node:internal/process/esm_loader:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'test\node_modules\react\jsx-runtime' imported from test\node_modules\react-data-grid\lib\bundle.js
Did you mean to import react/jsx-runtime.js?
    at new NodeError (node:internal/errors:259:15)
    at finalizeResolution (node:internal/modules/esm/resolve:307:11)
    at moduleResolve (node:internal/modules/esm/resolve:742:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11)
    at Loader.resolve (node:internal/modules/esm/loader:85:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:229:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:51:40)
    at link (node:internal/modules/esm/module_job:50:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

exports जोड़ना इसे ठीक करना चाहिए

@nstepien एक पूर्ण exports नक्शा प्रदान करना जैसा कि आपने अपनी पिछली पोस्ट में दिखाया है, मेरे विश्वास से कोई विकल्प नहीं है। सीजेएस इंटरऑप और सामान के संबंध में कौन सा नोड लागू होता है वास्तव में मौजूदा पारिस्थितिकी तंत्र के साथ अच्छा नहीं खेलता है। दोहरे पैकेज का खतरा वास्तविक है - विशेष रूप से रीक जैसे पैकेजों के लिए जिनकी एक प्रति की आवश्यकता होती है।

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

@Andarist यह ठीक काम करता है, और प्रतिक्रिया के मामले में अलग नहीं है, जिसमें हमेशा वह खतरा होता है और पारिस्थितिकी तंत्र इसे हर जगह एक सहकर्मी को प्रतिक्रिया देकर हल करता है। एक "निर्यात" नक्शा यहां ठीक काम कर सकता है, जब तक कि ईएसएम फाइलें और सीजेएस फाइलें एक ही स्थिति साझा करती हैं - जिसे सरल ईएसएम रैपर लिखकर हासिल किया जा सकता है।

यदि रिएक्ट की सभी निर्भरताएँ, सकर्मक या नहीं, प्रतिक्रिया के नियंत्रण में हैं (जो इस मामले में वे हैं) और उन सभी के ईएसएम प्रवेश बिंदु सिर्फ सीजेएस सामग्री का पुन: निर्यात कर रहे हैं तो आप - शायद यह इस विशेष मामले में प्राप्त करने योग्य है।

ईएसएम प्रविष्टि का वास्तविक आकार क्या होना चाहिए, इसका पूरा नाटक अभी भी है (नाम, डिफ़ॉल्ट, दोनों):

• नेम-ओनली: वास्तव में बैकवर्ड-संगत नहीं है क्योंकि बहुत सारे कोड import React from 'react' का उपयोग कर रहे हैं, जो कि वास्तव में ईएसएम का उपयोग करते समय नोड में रिएक्ट को वास्तव में आयात करने का एकमात्र तरीका है।
• डिफ़ॉल्ट-केवल: वास्तव में पिछड़ा-संगत नहीं है क्योंकि हमारे वहां बहुत सारे कोड import * as React from 'react' का उपयोग कर रहे हैं, इसे अक्सर टाइप-चेकर्स और अन्य टूल्स द्वारा प्रचारित किया गया है
• दोनों: इसे पूरी तरह से पिछड़ा-संगत बनाने का एकमात्र तरीका है, इसलिए यह सभी मौजूदा लोडिंग शैलियों के साथ काम कर सकता है और निर्भरता पेड़ में ईएसएम और सीजेएस मॉड्यूल को मिलाकर काम कर सकता है

मैं लगातार ईएसएम रैपर की संभावना के बारे में भूल जाता हूं क्योंकि वे एक धोखा की तरह महसूस करते हैं, लेकिन यह भी क्योंकि यह तकनीक केवल तभी काम करती है जब आप अपनी सभी निर्भरताओं को नियंत्रित करते हैं और वास्तव में एक सार्वभौमिक रणनीति के रूप में उपयोग नहीं किया जा सकता है जो "बस काम करेगा"

मुझे डर है कि दोनों प्रदान करने की एकमात्र सार्वभौमिक रणनीति है, वास्तव में, सीजेएस में आपके सभी वास्तविक कोड होने और नामित निर्यात प्रदान करने के लिए इसके चारों ओर ईएसएम रैपर लिखना। कोड जो स्टेटफुल नहीं है और न ही पहचान पर निर्भर करता है , दोनों में मूल रूप से

jsx-runtime स्टेटफुल सही नहीं है? esm/cjs दोनों को बिना किसी आवरण के शिप करने के लिए सुरक्षित होना चाहिए।

क्या मुझे esm नोड में react/jsx-runtime आयात करने के लिए एक अलग मुद्दा लॉग करना चाहिए?

फ्रंटएंड पैकेज के लिए एक अतिरिक्त चुनौती दोहरी स्थिति के खतरे में शामिल हो जाती है: इसे डबल बंडल खतरा कहते हैं।

ESM और CJS संस्करणों का निर्यात करते समय और पैकेज का उपयोग require और import माध्यम से किया जाता है, दोनों संस्करणों को बंडल किया जाएगा और पैकेज के लिए प्रभावी बंडल आकार को दोगुना किया जाएगा।

@sokra क्या व्यवहार में यह संभव है? उदाहरण के लिए रोलअप के साथ मैं यह मानूंगा कि चूंकि cjs मॉड्यूल esm मॉड्यूल में तब्दील हो जाते हैं, इसलिए वह जब भी उपलब्ध हो esm मॉड्यूल आयात करना पसंद करेगा।

नोड शब्दार्थ का अनुसरण करने वाले बंडलरों के लिए यह अभ्यास में संभव है - जैसे कि वेबपैक 5. शब्दार्थ से मेल खाना महत्वपूर्ण है क्योंकि अन्यथा आप नोड में चलते समय और बंडल कोड चलाते समय संभावित रूप से विभिन्न परिणामों का अनुभव करेंगे।

हालांकि, वेबपैक 5 एक विशेष "module" शर्त को संभालता है जिसका उपयोग esm/cjs (निर्यात मानचित्र से आने वाले) को कम करने के लिए किया जाता है।

यदि हम @ ljharb के प्रस्ताव पर विचार करते हैं, तो यह वास्तव में प्रासंगिक नहीं है, क्योंकि उनका प्रस्ताव है कि esm फ़ाइल रैपर कोड की कुछ पंक्तियाँ हो सकती है जो केवल cjs फ़ाइल को पुनः निर्यात करेगी।

एक पतले ईएसएम आवरण के साथ, बंडलर के साथ या उसके बिना शून्य अतिरिक्त खतरा होता है - केवल सामान्य एक जो पीयर डिप्स ग्राफ में डुप्ली से बचते हैं।