Next.js: नोड_मॉड्यूल्स के अंदर ट्रांसपाइल मॉड्यूल के लिए समर्थन जोड़ें

• यह webpack() एक्सटेंशन के साथ करने योग्य क्यों नहीं है?
• transpileModules बेहतर लगता है
• क्या हम रेगेक्सप्स स्वीकार करेंगे?

यह वेबपैक () एक्सटेंशन के साथ करने योग्य क्यों नहीं है?

मुझे आशा है कि आपका मतलब कस्टम वेबपैक कॉन्फ़िगरेशन है। यह साध्य है। लेकिन यह मौजूदा लोडर में बैठता है। इसे प्राप्त करना कुछ कठिन है।

transpileModules बेहतर लगता है

बहुत बढ़िया। मैं अपडेट करूंगा।

क्या हम रेगेक्सप्स स्वीकार करेंगे?
हां। ज़रूर।

अरे,

जैसा कि मैं अपनी वेबसाइट शुरू कर रहा हूं, मैं लर्न/नेक्स्ट/स्टाइल जैसी नई तकनीकों की कोशिश कर रहा हूं ... और इस पर शुरुआती प्रतिक्रिया देने में खुशी होगी।

मैंने एक डुप्लीकेट मुद्दा खोला है जहां मैंने अपने नेक्स्टजेएस मॉड्यूल में एक सीआरए-आधारित मॉड्यूल को आयात/ट्रांसपाइल करने का प्रयास किया लेकिन यह नहीं पता था कि ट्रांसपिलेशन कैसे होता है (ध्यान दें कि मैं अपने मॉड्यूल को स्टैंडअलोन के रूप में चलाने योग्य रखना चाहता हूं)

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

मैं अपने क्लाइंट के लिए एक सिंगल बेबेल कॉन्फिगर करना चाहता हूं और उस कॉन्फिग को अपने सभी डिकॉउल्ड मॉड्यूल के साथ साझा करना चाहता हूं। यह शायद इतना आसान नहीं है अगर मैं अपने मॉड्यूल को नेक्स्ट रनर के बाहर स्टैंडअलोन के रूप में चलाने की क्षमता रखना चाहता हूं

मेरी वर्तमान परीक्षण परियोजना यहां है: https://github.com/slorber/playground/ जैसे ही कोई कांटा/पीआर होगा, मैं इसे अपग्रेड करने का प्रयास करूंगा। @arunoda क्या आप इस पर काम कर रहे हैं?

@slorber वर्तमान में हम 2.0 रिलीज पर ध्यान केंद्रित कर रहे हैं और हम सामान को ठीक कर रहे हैं और जितना संभव हो सके बग ढूंढ रहे हैं।

मैंने इस पर काम शुरू नहीं किया है लेकिन हम इसे 2.0 के बाद ही कर सकते हैं।

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

मैं एक बंडलर विशेषज्ञ नहीं हूं, लेकिन मुझे लगता है कि मैं पैकेज के "मॉड्यूल" फ़ील्ड का उपयोग करूंगा। जेसन नहीं? जहां तक ​​​​मुझे पता है "मुख्य" पहले से ही पारदर्शी कोड के लिए लगता है। लेकिन चूंकि वेबपैक कॉन्फ़िगरेशन ट्रांसपिलेशन को शामिल/बहिष्कृत करने की अनुमति देता है, मुझे यकीन नहीं है कि यह प्रासंगिक है। मैं किन 3 क्षेत्रों का उपयोग करना चाहूंगा इस पर कोई सिफारिश?

@slorber मुझे लगता है कि main का समर्थन करता है। आप इसका इस्तेमाल कर सकते हैं।
हम अपने next.conf.js . में exclude फ़ंक्शन में फ़ाइलपथ की जांच कर सकते हैं

हम्म मैंने नेक्स्ट 2.x के खिलाफ अभ्यास में जो देखा है उसके अनुसार मैंने मॉड्यूल काम देखा है (लेकिन बाद में रनटाइम पर विफल रहता है क्योंकि ट्रांसपिल नहीं किया जाता है) जबकि जेएसनेक्स्ट: मुख्य काम नहीं करता (जहां तक ​​​​मुझे याद है)। लेकिन इसका समर्थन किया

वैसे भी, जेएसनेक्स्ट: मुख्य या मॉड्यूल इस समस्या का समाधान प्रतीत नहीं होता है, इसलिए कंपनी-आंतरिक मॉड्यूल के लिए केवल ट्रांसपिलेशन को सक्षम करना शायद पर्याप्त है

समुदाय एक दृष्टिकोण पर सहमत नहीं हुआ है ना? उदाहरण के लिए, मैं बिना किसी समस्या के बॉक्स से बाहर react-youtube का उपयोग करने में सक्षम था। मैं प्रकाशित करने से पहले बड़ी संख्या में मॉड्यूल ट्रांसपाइल मान रहा हूं?

संदर्भ: https://github.com/rauchg/blog/blob/master/components/post/youtube.js

हां, प्रकाशित करने से पहले हमेशा ट्रांसपाइल करना समझ में आता है क्योंकि आप नहीं जानते कि मॉड्यूल का उपभोग कैसे किया जाएगा और आप क्लाइंट को अपने lib के लिए उपयुक्त बेबेल सेटिंग्स सेट करने के लिए मजबूर नहीं करना चाहते हैं। रोलअप यही

लेकिन कंपनी के आंतरिक पैकेजों के लिए, ट्रांसपिलेशन सेटिंग्स कई प्रोजेक्ट (जैसे बैबेल प्रीसेट) में समान हो सकती हैं और क्लाइंट बंडलर को सभी कंपनी निर्भरताओं को पार करने के लिए मेरे लिए समझ में आता है

@slorber से बहुत सहमत हैं - यह आंतरिक मॉड्यूल के लिए बहुत आसान होगा यदि आप अपनी परियोजना को तोड़ रहे हैं और जितना संभव हो सके चीजों को अलग कर रहे हैं।

और @rauchg / @arunoda RegExp का समर्थन करना वास्तव में अच्छा होगा, इसलिए आपके पास एक प्रविष्टि हो सकती है जो NPM org नामस्थान का उपयोग करके कंपनी के सभी आंतरिक मॉड्यूल को पकड़ती है:

// next.config.js
module.exports = {
  transpileModules: [
    /^\@my-npm-org\/.*/
  ]
}

सुंदर सुझाव @philcockfield

अरे शायद यह कुछ प्रीसेट देने लायक हो सकता है। यह मुझे लगता है कि अधिकांश उपकरण (लर्न/एनपीएम लिंक ...) सिम्लिंक पर भरोसा करते हैं, इसलिए कुछ सरल क्यों नहीं:

```जावास्क्रिप्ट
मॉड्यूल.एक्सपोर्ट = {
transpileModules: ["सिम्लिंक"]
}
````

जितना अधिक मैं ईमानदारी से next.js का उपयोग करता हूं, और इसके चारों ओर मॉड्यूल की एक समृद्ध पुस्तकालय का निर्माण करता हूं, उतना ही यह सुविधा महत्वपूर्ण हो जाती है। यह मेरे आंतरिक मॉड्यूल में बेबेल संकलन चरण की नकल करते हुए एक वास्तविक पिटा बन रहा है।

मैं

मैं आज इस पर काम कर रहा हूँ :)

@philcockfield इसे आज़माएं: https://github.com/zeit/next.js/pull/749

धन्यवाद @ अरुणोदा

तो जैसा कि आपके पीआर पर टिप्पणी की गई है यदि यह सिम्लिंक का समर्थन नहीं करता है तो यह सुविधा थोड़ी सीमित होगी क्योंकि यह एनपीएम लिंक या लर्ना के साथ काम नहीं करेगी, लेकिन केवल एनपीएम मॉड्यूल के लिए जो ट्रांसपिल्ड नहीं हैं (दाएं? मुझे कोई अन्य नहीं दिख रहा है जब तक आप /node_modules अंदर मॉड्यूल नहीं करते हैं, तब तक उपयोग करें)

सिम्लिंक का समर्थन क्यों नहीं? क्या समर्थन करना कठिन है?

इसके अलावा मैं अपने ऐप पर आपकी शाखा का परीक्षण करना चाहता था, लेकिन मुझे यकीन नहीं है कि ऐसा करने का सबसे अच्छा तरीका क्या है। क्या कोई ज्ञात प्रक्रिया है जिससे हम आसानी से एक शाखा का परीक्षण कर सकते हैं और यह परीक्षक के लिए बहुत दर्दनाक नहीं है? मैंने कुछ सामान की कोशिश की है जैसे:

• npm https://github.com/arunoda/next.js.git#add -706 स्थापित
• /नोड_मॉड्यूल्स के अंदर कांटे का गिट क्लोन: ज्यादा सफलता नहीं (लेकिन यह मेरी विशिष्ट लर्न सेटिंग्स के कारण हो सकता है)

वर्तमान में कांटे का परीक्षण करने का सबसे अच्छा तरीका क्या है?

यदि आप इसे next.config.js : module.exports = { webpack: (config , तो config.module.rules में कुछ चीजें हैं, ऐसा लगता है कि आपको इनमें से किसी एक नियम को बदलने या एक जोड़ने की आवश्यकता है? :

  { loader: 'babel-loader',
    include: '/Users/me/gh/guide/node_modules/next/dist/pages',
    options: 
     { babelrc: false,
       cacheDirectory: true,
       sourceMaps: 'both',
       plugins: [Object] } },
  { test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: 
     [ '/Users/me/gh/guide',
       '/Users/me/gh/guide/node_modules/next/dist/pages' ],
    exclude: [Function: exclude],
    query: 
     { babelrc: true,
       cacheDirectory: true,
       sourceMaps: 'both',
       presets: [] } } ]

सुझाए गए सरल वाक्यविन्यास की प्रतीक्षा कर रहे हैं।

मेरी अज्ञानता के लिए क्षमा करें मैं नहीं देख सकता कि इस मुद्दे का समाधान क्या है? हम अपने कोडबेस में es6 आयात करना पसंद करेंगे, हमें ट्री-शेकिंग की आवश्यकता है।

क्या इस पर कोई जनसंपर्क है?

@andrewmclagan यह मुद्दा अभी भी खुला है और इसका एक संबंधित पीआर है जो शायद सभी को संतुष्ट नहीं करेगा (जैसे LernaJS उपयोगकर्ता)

इसकी स्थिति क्या है? क्या node_modules से आयात की गई फ़ाइलों को ट्रांसपाइल करने के लिए अगला वेबपैक बनाने का कोई अन्य तरीका है?

@slorber मैं पीआर पर एक नज़र

मुझे इसी तरह की समस्या का सामना करना पड़ रहा है। get-urls पैकेज का उपयोग करने का प्रयास कर रहा है। dev साथ काम करता है लेकिन जब मैं इसे संकलित करता हूं। मुझे uglify से त्रुटि मिली

...
{ Error: commons.js from UglifyJs
...

कृपया इसके लिए कोई उपाय है?

अरुणोदा यहां कभी इस पर काम करेंगी। वह इससे पहले #749 . में कर चुके हैं

मुझे इस सुविधा को लागू होते देखना अच्छा लगेगा। जैसा कि @philcockfield ने उल्लेख किया है, मॉड्यूल का एक पुस्तकालय बनाना एक सामान्य परिदृश्य है जो Next.js ट्रांसपिलेशन पर निर्भर करता है, और परियोजनाओं के बीच घटकों को साझा करने में सक्षम होना बहुत अच्छा होगा।

यह न केवल पेड़ को हिलाने के लिए आवश्यक है। styled-jsx जैसे बेबेल प्लगइन्स के लिए भी। इसलिए यदि आपके पास एक मॉड्यूल (लाइब्रेरी की तरह) है जो एक बेबल प्लगइन का उपयोग करता है तो सबसे अच्छा समाधान ES6 स्रोत कोड शामिल करना है और अपने ऐप को इसे नोड_मॉड्यूल्स से ट्रांसपाइल करने की अनुमति देना है। बेशक अगला पहले से ही डिफ़ॉल्ट रूप से styled-jsx है।

यहाँ मैंने क्या किया

// next.config.js
exports.webpack = config => (config.module.rules = config.module.rules.map(({exclude, ...rest}) => ({
  exclude: Object.prototype.toString.call(exclude) === '[object Function]' ? (str => !/mycomponents/.test(str) && exclude(str)) : exclude,
  ...rest
})), config);

मैंने मूल रूप से प्रत्येक exclude को एक कस्टम फ़ंक्शन के साथ बदल दिया।
मुझे नहीं पता कि मैं क्या गलत कर रहा हूं, लेकिन मैं इसे काम नहीं कर सकता।
मुझे node_modules/mycomponents की सामग्री को Next.js . द्वारा भी ट्रांसपाइल करने की आवश्यकता है

यह तब भी काम नहीं करता है जब मैं एक खाली सरणी के साथ सभी बहिष्करणों को पूरी तरह से ओवरराइड करता हूं

exports.webpack = config => (config.module.rules = config.module.rules.map(({exclude, ...rest}) => ({
  exclude: [],
  ...rest
})), config);

कृपया मेरी मदद करें :)
धन्यवाद

अरे दोस्तों ( @thealjey ) मैं महीनों से jsnext:main संचालित मॉड्यूल को ट्रांसपिल कर रहा हूं।

• निम्नलिखित रिज़ॉल्वर का उपयोग करें:
  https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js#L66
  https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js#L203
  मूल रूप से यह कहता है: यदि jsnext:main package.json में है तो निर्दिष्ट एंट्रीपॉइंट को ट्रांसपाइल करें, अन्यथा जो main में है उसे आयात करें
• एनपीएम से जुड़े मॉड्यूल का उपयोग करते समय निम्नलिखित मदद मिलेगी:
  https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js#L168

मैं next.js का उपयोग नहीं कर रहा हूं, लेकिन मुझे आशा है कि यह मदद करता है।

@damianobarati नहीं, दुर्भाग्य से यह नहीं है
जो कुछ भी मुश्किल नहीं है उसे ट्रांसपाइल करने के लिए सीधे वेबपैक को कॉन्फ़िगर करना, लेकिन मैं इस काम को Next.js के संदर्भ में करने के लिए संघर्ष कर रहा हूं

हे सब, किसी को समाधान मिल गया है?

मेरे पास एक स्थानीय ES6 लिंक्ड नोड मॉड्यूल है जिसे मुझे अपने प्रोजेक्ट में आयात करने की आवश्यकता है लेकिन मुझे वेबपैक वूडू सही नहीं मिल रहा है!

मुझे यकीन है कि एक बेहतर तरीका है, लेकिन हम निर्माण पर बेबेल के माध्यम से सब कुछ चलाते हैं:

next build && babel .next/*.js --out-dir . --presets=es2015,react

क्या यह मर गया? मैं एक कस्टम मॉड्यूल को ट्रांसपाइल करने का एक तरीका ढूंढ रहा हूं और ऐसा लगता है कि यह अभी भी संभव नहीं है।

@mattfelten यह v5 . के रोडमैप पर है

क्या किसी के पास इसके लिए कामकाज का उदाहरण है?

@timneutkens क्या इसके लिए कोई समयरेखा है? सराहना करें कि यह अक्सर एक असंभव प्रश्न है, लेकिन हम अभी काम पर अपने ढेर को निर्धारित करने की कोशिश कर रहे हैं और यह हमारे लिए एक बहुत बड़ा अवरोधक है! :)

समाधान सुझाव भी मान्य हैं।

@thealjey को एहसास है कि यह एक पुरानी टिप्पणी है, लेकिन आपका समाधान शायद काम नहीं करता क्योंकि एक include निर्दिष्ट है जिसे ओवरराइड करने की आवश्यकता होगी।

अद्यतन: इस रणनीति पर ध्यान दिया गया, लेकिन यह अगले.जेएस के आंतरिक विन्यास के भीतर विभिन्न मॉड्यूल निर्देशिकाओं के लिए सभी अलग-अलग लोडर को देखते हुए समझदार नहीं है। यह प्रथम श्रेणी होना चाहिए।

@chrisui मेरा (अस्थायी) समाधान -प्लगइन-मॉड्यूल-रिज़ॉल्वर का उपयोग करना था, इस तरह कॉन्फ़िगर किया गया - "plugins": [["module-resolver", {"root": ["./"]}]]
यह किसी भी तरह से एक सही समाधान नहीं है, लेकिन, चूंकि बाकी सब विफल हो गया है, यह अभी के लिए काम करता है
इसके लिए धन्यवाद कि मुझे प्रत्येक आयात के साथ ../ का एक गुच्छा लिखने की आवश्यकता नहीं है
यह वास्तव में कुछ के लिए बेहतर समाधान हो सकता है, हालांकि यह निश्चित रूप से पुन: प्रयोज्यता में मदद नहीं करता है

@thealjey क्या आप एक उदाहरण दे सकते हैं?
मेरे पास एक प्रोजेक्ट सेटअप है जहां मैं इसे बिना किसी लाभ के कोशिश करता हूं ...
https://github.com/jamesgorrie/nappy

मैं खुशी-खुशी एक पीआर प्राप्त करने की कोशिश करूंगा क्योंकि इससे हमारा जीवन इतना आसान हो जाएगा, लेकिन कुछ सवाल हैं जैसे: क्या next.js कुछ मॉड्यूल के ट्रांसपिलिंग का समर्थन करना चाहिए या यह ट्रांसपिलर तक होना चाहिए, लेकिन next.js मॉड्यूल रिज़ॉल्यूशन का अधिक सख्ती से पालन करता है। next.js लिए नए के रूप में सुनिश्चित नहीं है कि किससे पूछना है या कहां से शुरू करना है।

यह v5 . के रोडमैप पर है

@timneutkens ने इसे v5 में बनाया?

जानकर आश्चर्य हो रहा है।

जरा देखिए कि इसका विलय कहां हुआ है। इसे 8 दिन पहले मर्ज किया गया था। 5.0.0 2 दिन पहले जारी किया गया था। कैनरी शाखा से जहां इसे विलय कर दिया गया है ...

क्या किसी के पास कोई उदाहरण है कि इसे कैसे कार्यान्वित किया जा सकता है? जैसा ऊपर बताया गया है, क्या इसे इस तरह काम करना चाहिए?

module.exports = {
    transpileModules: ['my-npm-module']
}

या यह अलग दिखता है?

https://github.com/zeit/next.js/pull/3732

मैं उलझन में हूं। @timneutkens उपरोक्त लिंक एक पीआर के लिए है जो अभी भी खुला है। क्या इसे अभी तक v5 में मर्ज नहीं किया गया है?

संपादित करें: कोई बात नहीं, उदाहरण को उजागर करने के लिए यह सिर्फ एक पीआर है।

यह एक उदाहरण है, आप उदाहरण को बिना मर्ज किए उपयोग कर सकते हैं। transpileModules कुछ ऐसा है जिससे हम बाद में निपटेंगे।

अंगूठे के सामान्य नियम के रूप में: जब कोई मुद्दा खुला होता है तो उसे जारी नहीं किया जाता है।

@brianyingling मैंने एक अंतरिम समाधान (केवल v5) के लिए उदाहरण को प्लगइन में बदल दिया है।
यह इस समय हमारे लिए काम कर रहा है, जब तक कि अधिक मजबूत, आधिकारिक समाधान नहीं हो जाता।

https://www.npmjs.com/package/@weco/next -plugin-transpile-modules

मुझे एप्लिकेशन कोडबेस में एक मॉड्यूल के लिए इसका एक उदाहरण देखना अच्छा लगेगा।

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

यहाँ एक साधारण रेप्रो है: https://github.com/statico/nextjs-with-async-lib

// pages/index.js
import { foo } from '../lib/test'
export default () => <div>hello {String(typeof foo)}</div>

// lib/test.js
async function foo () {}
module.exports = { foo }

@timneutkens मुझे यह बताता है क्योंकि मैं साझा मॉड्यूल में async/await का उपयोग कर रहा हूं। मुझे लगता है कि मेरा समाधान async/प्रतीक्षा को हटाना और सब कुछ .then() -स्टाइल कॉलबैक में बदलना हो सकता है।

ठीक है, मुझे एक फिक्स मिला जो मेरे लिए काम करता है।

सबसे पहले, मैंने config.resolve.symlinks = false सेटिंग को अपने next.config.js कॉन्फ़िगरेशन प्रति https://github.com/zeit/next.js/issues/3018#issuecomment -380879576 में जोड़ा

// next.config.js
webpack: (config, { dev }) => {
  config.resolve.symlinks = false
  return config
}

फिर मैंने अपनी साझा लाइब्रेरी - एक .js फ़ाइल जो कॉमनजेएस निर्यात और async / await कीवर्ड का उपयोग करती है - को shared नामक एप्लिकेशन के उपदिर में रखा:

// shared/index.js
async function foo () {}
module.exports = { foo }

// shared/package.json
{
  "name": "@myapp/shared",
  "version": "1.0.0",
  "main": "index.js",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": { ... }
}

और अंत में मैंने एक postinstall स्क्रिप्ट को एक साथ जोड़ने के लिए जोड़ा जब कोई भी मुख्य एप्लिकेशन में yarn install करता है:

// package.json
{
  ...
  "scripts": {
    "postinstall": "cd shared ; yarn -s unlink ; yarn link && yarn && cd .. && yarn link @myapp/shared",
   ...

अब मेरा मोचा परीक्षण सर्वर की तरफ से गुजरता है, मेरा कस्टम कोआ सर्वर ठीक शुरू होता है, और मेरे नेक्स्टजेएस पृष्ठों में कोई और अधिक पागल Cannot assign to read only property 'exports' of object '#<Object>' है।

नेक्स्टजेएस 5.1.0 में अपग्रेड करते समय मुझे भी यही समस्या थी। अगले में एक या दो नोड मॉड्यूल IE11 में वसा तीर कार्यों को स्थानांतरित नहीं कर रहे थे और त्रुटियों को फेंक रहे थे। मैं पहले अलग-अलग पॉलीफ़िल सेट कर चुका था और अंत में मैंने अपने next.config.js उन मॉड्यूल फ़ाइलों को babel-polyfill साथ लक्षित करने का विकल्प चुना:

module.exports = {
  webpack: (config, { dev }) => {
    const polyfill = new Promise((resolve, reject) => {
      const originalEntry = config.entry

      originalEntry().then(entries => {
        if (entries['main.js']) {
          entries['main.js'].unshift('./client/polyfills.js')
          entries['main.js'].unshift('babel-polyfill')
        }
        config.entry = entries

        resolve()
      })
    })

    config.module.rules.push(
     {
        test: path.resolve('./node_modules/next/node_modules/'),
        loader: 'babel-loader',
        options: {
          babelrc: false,
          cacheDirectory: false,
          presets: ['es2015']  
        }
      }
    )

    return polyfill.then(() => { return config })
  }
}

आशा है कि यह किसी की मदद करता है।

ईएसएम एक आकर्षण की तरह काम करता है।

index.js में एक कस्टम नेक्स्ट.js सर्वर के साथ, मैं सर्वर को शुरू करने के लिए इस कमांड को चला सकता हूं और esm पूरी तरह से काम करता है, Lerna-symlinked प्रोजेक्ट पैकेज में ES मॉड्यूल को हल करता है।

node -r esm index.js

@ करन कूल, क्या यह

@curran मैं उत्पादन में ऐसा करने से

@ब्लैकबिंग मुझे नहीं पता।

@thealjey ऐसा क्यों है?

अगर कोई त्वरित और आसान समाधान ढूंढ रहा है, तो मैंने यह किया है। मैंने एक उपनिर्देशिका बनाई, shared/ , किसी भी कोड के साथ हम स्टैंडअलोन नोड स्क्रिप्ट और क्लाइंट के माध्यम से नेक्स्टजेएस के माध्यम से बैकएंड पर चलाना चाहते हैं। इसका अपना package.json और इसका नाम @myproject/shared घोषित किया गया है।

फिर, मुख्य (पैरेंट) प्रोजेक्ट में, मैंने package.json एक पोस्टइंस्टॉल स्क्रिप्ट को इस तरह जोड़ा: cd shared && yarn -s unlink >/dev/null 2>&1 ; yarn -s link && yarn -s && yarn link @myproject/shared - फिर कम से कम एक बार yarn चलाएं, और अपने आयात को import { whatever } from '@myproject/shared/somefile' बदलें

इस तरह साझा कोड बिना किसी पागल ट्रांसपिलेशन चरणों के काम करता है, साथ ही आपको yarn / npm हर बार अपडेट करने की आवश्यकता नहीं है क्योंकि yarn link एक बनाता है सिमलिंक

टाइपस्क्रिप्ट का उपयोग करने वालों के लिए, @weco/next-plugin-transpile-modules काम नहीं करना चाहिए। मैंने नेक्स्ट के withTypescript को संभालने के लिए एक कांटा बनाया: https://github.com/KeitIG/next-plugin-transpile-modules

मुझे अभी भी यह पता लगाने की जरूरत है कि टाइपस्क्रिप्ट में सर्वर-साइड कोड होने पर भी चीजों को ठीक से कैसे किया जाए।

इस पर कोई भी समाचार?

@bogdansoare मैं https://github.com/KeitIG/next-plugin-transpile-modules का उपयोग कर रहा हूं

और फिर भी मेरे द्वारा एक और, निम्नलिखित सार में। यह सभी पैकेजों के बजाय टाइपस्क्रिप्ट, और @scope विशिष्ट पैकेजों को भी संभालता है। https://gist.github.com/trusktr/44400d0d016c506629b4f914799dc9cd

मैंने बस एक साधारण कामकाजी उदाहरण रखा है जो esm और lerna

https://github.com/curran/nextjs-esm-example

/सीसी @jdalton

व्यक्तिगत रूप से यह निम्नलिखित next.config.js साथ काम कर रहा है:

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: [
        options.defaultLoaders.babel
      ]
    })

    return config
  }
}

यह node_modules में सब कुछ बेबेल करता है, जिसे आईई 11 संगतता प्राप्त करने के लिए मुझे आवश्यक था ...

मैं इसके लिए एक समाधान की भी सराहना करता हूं, जो मेरी परियोजना में गैर-पारदर्शी एनपीएम पैकेज जोड़ने के साथ संघर्ष कर रहा है। उन्हें अभी के लिए विक्रेता को डाउनलोड करना पड़ा :(
वास्तव में गुस्से वाला

@ Bel0v मेरा मानना ​​​​है कि आप इसे पहले से ही next-plugin-transpile-modules साथ पूरा करने में सक्षम होना चाहिए। इस मुद्दे को बंद होने की संभावना है। cc/ @timneutkens

मैं अभी भी वैकल्पिक समाधानों की जांच करना चाहूंगा।

हाल ही में जेमी ने नोड_मॉड्यूल्स को संकलित करने के मुद्दे के बारे में एक बहुत विस्तृत सूत्र लिखा: https://twitter.com/jamiebuilds/status/1080840492525350912

मैंने जेमी के सूत्र को पढ़ा, हालांकि मैं इस स्थिति और समाधान पर हेनरी झू और बेबेल की राय भी साझा करना चाहूंगा।
https://babeljs.io/blog/2018/06/26/on- Consumer-and-publishing-es2015+-packages

(टिम के साथ असहमत नहीं, मैंने सोचा कि मैं कई पेशेवरों और विपक्षों को साझा करूंगा। वैकल्पिक समाधानों की जांच में टिम की मदद कर सकता है)

हाँ, हम पिछले आधे साल से इस मुद्दे के बारे में कई लोगों से बात कर रहे हैं, जिनमें हेनरी . भी शामिल हैं

अपने स्वयं के पैकेजों को एक मोनोरेपो में स्थानांतरित करने की इच्छा के बावजूद, नोड_मॉड्यूल्स को स्थानांतरित करने के बारे में चिंता एक बहुत ही सामान्य आवश्यकता है, जिस पर ये चिंताएं लागू नहीं होती हैं

@dcalhoun मैंने कोशिश की है लेकिन दुर्भाग्य से मुझे अभी भी अप्रत्याशित टोकन त्रुटि मिलती है। इस प्लगइन पर एक खुला अगला 7 मुद्दा है जो संबंधित हो सकता है

@bel0v

आपको अक्सर पूछे जाने वाले प्रश्न पढ़ने चाहिए;) इस समस्या का समाधान है: https://github.com/martpie/next-plugin-transpile-modules#i -have-trouble-making-it-work-with-nextjs-7

मैं कई परियोजनाओं पर इस प्लगइन का उपयोग कर रहा हूं, और यह अच्छी तरह से काम करता है। अगला 7 अंक अजीब है, मुझे यकीन नहीं है कि यह नेक्स्ट या बैबेल से आ रहा है, मैंने वैसे भी यहां एक मुद्दा खोला: https://github.com/zeit/next.js/issues/5393

@martpie हाँ, मुझे विश्वास है कि मैंने कोशिश की है .. वैसे भी मैं इसे एक और कोशिश दूंगा

@martpie हमने एक सुसंगत babel.config.js, और यार्न वर्कस्पेस के साथ next7 का उपयोग करना शुरू कर दिया है, मैं देख सकता हूं कि क्या मैं एक साधारण उदाहरण सेट कर सकता हूं।

मैंने यहां मूल उदाहरण फोर्क किया है
https://github.com/bel0v/learnnextjs-demo
इसमें, मैंने एक अनियंत्रित निर्भरता (वायर्ड-एलिमेंट्स) स्थापित की, एक बिल्ड त्रुटि Unhandled Rejection (SyntaxError): Unexpected token { मिली और इसे सुझाए गए तरीके से ठीक करने का प्रयास किया।
मैं सोच रहा हूँ कि शायद मुझे इसके काम करने के लिए कुछ अतिरिक्त बेबेल प्लगइन्स की आवश्यकता है ..

@ bel0v एफएक्यू में फिर से, इस बारे में एक स्पष्टीकरण है कि लर्न सेटअप क्यों काम नहीं करता है (टीएल, डीआर; आप शायद गलत का उपयोग कर रहे हैं)

@martpie आह, समझ गया! यह नहीं पता था कि लर्ना के साथ तीसरे पक्ष के पैकेज की स्थापना की गई थी। धन्यवाद

ऐसा लगता है कि https://twitter.com/jamiebuilds को निलंबित कर दिया गया है, इसलिए अब वहां धागा नहीं पढ़ सकता। #3018 इस मुद्दे के संदर्भ में बंद हो गया है, इसलिए मैं सोच रहा हूं कि वैकल्पिक तरीकों पर क्या विचार किया जा रहा है?
क्या ये इन यूज-केस एटीएम के लिए अत्याधुनिक/नेक्स्ट.जेएस की सर्वोत्तम प्रथाओं का प्रतिनिधित्व करते हैं?
https://github.com/curran/nextjs-esm-example
https://github.com/wellcometrust/next-plugin-transpile-modules
https://github.com/martpie/next-transpile-modules
https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces

इसलिए, यदि आप, मेरी तरह, एक ऐसे प्रोजेक्ट पर काम कर रहे हैं जिसे IE11 का समर्थन करना है, तो आपको वास्तव में सभी कोड को node_modules/ के अंदर ट्रांसपाइल करना होगा। Next.js 7.x में मैं निम्नलिखित सेटअप का उपयोग कर रहा था, जिसने बहुत अच्छा काम किया।

दुर्भाग्य से, इसने नेक्स्ट.js 8.x में त्रुटियों के साथ काम करना बंद कर दिया कि मॉड्यूल अन्य मॉड्यूल आयात करने में विफल रहे क्योंकि उनके पास डिफ़ॉल्ट निर्यात नहीं था। मैं तो Next.js 8.x के लिए config नीचे है, जो केवल में कोड transpiles के साथ आया था node_modules/ के साथ @babel/preset-env , और कोई अन्य प्लग-इन।

यह मेरी browserlist संपत्ति को package.json सेट करके संयुक्त है:

  "browserslist": "defaults, IE >= 11, EDGE >= 14, Safari >= 11, Chrome >= 41, Firefox >= 52",

अगला 7.x

next.config.js

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: [
        options.defaultLoaders.babel,
      ],
    })

    return config
  },
}

अगला.जेएस 8.x

next.config.js

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-syntax-dynamic-import'],
        },
      },
    })

    return config
  },
}

दुर्भाग्य से, मुझे अभी तक इस सेटअप के साथ @babel/plugin-transform-runtime का उपयोग करने का तरीका नहीं पता चला है, इसलिए यह शायद कोड में कुछ सहायकों को थूक देगा उम्मीद है कि gzip इसका ख्याल रखेगा

मुझे लगता है यह भयानक हो सकता है अगर Next.js हमें सही ढंग से transpile के लिए एक विकल्प दे सकता है node_modules/ जो कुछ के साथ काम करने के लिए browserlist आपके पास। ऐसा लगता है कि ऐसी कोई भी बड़ी साइट, जिनमें कॉर्पोरेट उपयोगकर्ता हैं, पुराने ब्राउज़रों को ठीक से समर्थन देने के लिए इस पर निर्भर हैं।

next-transpile-modules (@jamesgorrie के शानदार काम के आधार पर) के अनुरक्षक के रूप में, मुझे यहां इस मुद्दे का सामना करने वाले किसी भी व्यक्ति की मदद करने में खुशी हो रही है।

मैं इस प्लगइन के साथ पेशेवर परियोजनाओं पर एक साल से अधिक समय से काम कर रहा हूं, और अब तक यह अच्छी तरह से खेला है।

Next.js से मूल समर्थन निश्चित रूप से बहुत बढ़िया होगा और मुझे इस सुविधा को next पैकेज में एकीकृत करने में मदद करने में खुशी होगी। मुझे पता है कि टिम के पास कुछ विचार थे जिन्हें वह आजमाना चाहता था, लेकिन फिर भी।

चीयर्स!

@martpie मैंने जल्दी से आपकी परियोजना को देखा, लेकिन _all_ मॉड्यूल को ट्रांसपाइल करने का एक त्वरित तरीका नहीं मिला, क्या यह संभव है? ️

साथ ही, मैं देख रहा हूं कि आप options.defaultLoaders.babel चुन रहे हैं और इसे बेबेल लोडर के रूप में उपयोग कर रहे हैं। Next.js 8.x के साथ ऐसा करते समय मुझे समस्या थी कि कुछ मॉड्यूल उसके बाद CJS मॉड्यूल के रूप में ठीक से पहचाने जाने में विफल हो जाएंगे, और फिर अन्य libs उन्हें आयात करने में विफल हो जाएंगे, उदाहरण:

./pages/_glamor.js
Attempted import error: 'css' is not exported from 'glamor'.

./components/project-selector.js
Attempted import error: 'react-select/lib/Async' does not contain a default export (imported as 'AsyncSelect').

./node_modules/react-select/dist/react-select.esm.js
Attempted import error: 'react-input-autosize' does not contain a default export (imported as 'AutosizeInput').

./pages/signup/full.js
Attempted import error: 'react-select/lib/Creatable' does not contain a default export (imported as 'CreatableSelect').

./components/markdown-editor.js
Attempted import error: 'react-simplemde-editor' does not contain a default export (imported as 'SimpleMDEEditor').

./components/pagination.js
Attempted import error: 'react-js-pagination' does not contain a default export (imported as 'UpstreamPagination').

./node_modules/react-google-recaptcha/lib/es/recaptcha-wrapper.js
Attempted import error: 'react-async-script' does not contain a default export (imported as 'makeAsyncScriptLoader').

./pages/_glamor.js
Attempted import error: 'rehydrate' is not exported from 'glamor'.

इसलिए मैंने node_modules/ लिए एक कस्टम बेबेल कॉन्फ़िगरेशन प्रदान करने के लिए स्विच किया, जो केवल preset-env का उपयोग करके कोड को ट्रांसपाइल करता है, और Next.js- विशिष्ट ट्रांसफ़ॉर्म को छोड़ देता है। आप इस दृष्टिकोण के बारे में क्या सोचते हैं?

चीयर्स

@LinusU शायद transpileModules: ['(.*?)'] कोशिश करें और मुझे बताएं कि क्या यह काम करता है?

लेकिन हो सकता है कि यह भविष्य की प्रमुख रिलीज़ में काम न कर रहा हो, इसलिए सावधान रहें।

अधिक आम तौर पर, मैं पूरे node_modules फ़ोल्डर को ट्रांसपाइल करने के लिए अनुशंसा नहीं करता ("अत्यधिक हतोत्साहित" पढ़ें), इसे संकलित करने में हमेशा के लिए समय लगेगा और पैकेजों को ES3-संगत कोड (इसलिए IE11 संगत) प्रदान करना चाहिए।

केवल उस मॉड्यूल को ट्रांसपाइल करें जिसकी आपको आवश्यकता है! (जैसे lodash-es , स्थानीय मॉड्यूल आदि...)

संकुल को ES3-संगत कोड प्रदान करना चाहिए (इसलिए IE11 संगत)।

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

इसे संकलित करने में हमेशा के लिए लग जाएगा

यह मेरे लिए स्टार्टअप पर थोड़ा धीमा है, लेकिन उसके बाद, ऐसा लगता है कि यह कैश किया गया है और किसी विशिष्ट पृष्ठ में परिवर्तन करते समय मुझे तत्काल पुनः लोड दिखाई देता है।

केवल उस मॉड्यूल को ट्रांसपाइल करें जिसकी आपको आवश्यकता है!

इसके लिए मुझे यह जानने की आवश्यकता होगी कि कौन से पैकेज IE11 के साथ संगत हैं और कौन से नहीं हैं, साथ ही इस जानकारी को किसी भी निर्भरता (यहां तक ​​​​कि क्षणिक निर्भरता) में किसी भी समय अद्यतित रखते हैं। मैं नहीं देखता कि यह कैसे यथार्थवादी है

महत्वपूर्ण बात यह है कि ESM प्रवेश बिंदु जो package.json module किए जाते हैं, वे आमतौर पर ES5 होते हैं जिनमें ES6 आयात/पेड़ हिलाने के लिए निर्यात होता है। तो यह एक बंडलर (वेबपैक) का काम है, न कि ट्रांसपिलर (बेबेल) के लिए, जब तक कि अन्यथा न कहा गया हो। बहुत सारे सुव्यवस्थित पैकेजों में पहले से ही ESM प्रवेश बिंदु हैं, उदाहरण के लिए redux/es Redux के लिए जिसका उल्लेख OP द्वारा किया गया था।

यदि आप इसे next.config.js : module.exports = { webpack: (config , तो config.module.rules में कुछ चीजें हैं, ऐसा लगता है कि आपको इनमें से किसी एक नियम को बदलने या एक जोड़ने की आवश्यकता है? :

  { loader: 'babel-loader',
    include: '/Users/me/gh/guide/node_modules/next/dist/pages',
    options: 
     { babelrc: false,
       cacheDirectory: true,
       sourceMaps: 'both',
       plugins: [Object] } },
  { test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: 
     [ '/Users/me/gh/guide',
       '/Users/me/gh/guide/node_modules/next/dist/pages' ],
    exclude: [Function: exclude],
    query: 
     { babelrc: true,
       cacheDirectory: true,
       sourceMaps: 'both',
       presets: [] } } ]

सुझाए गए सरल वाक्यविन्यास की प्रतीक्षा कर रहे हैं।

मेरे लिए ठीक काम करता है

{
    test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: [
        path.resolve(__dirname, './node_modules/next/dist/pages'),
    ],
    query: {
        cacheDirectory: true,
        sourceMaps: 'both',
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-object-rest-spread']
    }
},

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

मैं इस मुद्दे की खोज करने वाले किसी और के लिए अपना समाधान यहां छोड़ने जा रहा हूं और लर्न का भी उपयोग कर रहा हूं:

साझा पैकेज के लिए एक पूर्व-प्रकाशित स्क्रिप्ट बनाएं जो स्रोत को एक डिस्ट डायरेक्टरी में ट्रांसपाइल करता है और लिंक करते समय लर्ना को डिस्टर्ब डायरेक्टरी को इंगित करने के लिए कहता है:

// package.json
"main": "dist",
"scripts": {
  // I'm using the react-app preset because it's easy
  "prepublish": "babel --presets react-app --plugins @babel/plugin-transform-modules-commonjs src --out-dir dist"
},
// This instructs Lerna to use dist when symlinking
"publishConfig": {
  "directory": "dist"
}

अब जब आप lerna bootstrap यह पूर्वप्रकाशित स्क्रिप्ट चलाएगा और स्रोत को ट्रांसपाइल करेगा ताकि अगला इसका उपभोग कर सके।

यदि आप lerna का उपयोग कर रहे हैं तो आप नेक्स्ट-ट्रांसपाइल-मॉड्यूल का उपयोग करके ट्रांसपाइल होने के लिए सिम्लिंक बना सकते हैं। उस पैकेज का उपयोग कैसे करें lerna के साथ दस्तावेज़ीकरण के नीचे लिखा गया है।

NextJs ऐप्स में कोड साझा करने की खोज करने वाले किसी भी व्यक्ति के लिए, मैं केवल यह रिपोर्ट करना चाहता हूं कि मेरे मोनो रेपो में एकाधिक नेक्स्टजे ऐप्स के बीच रिएक्ट घटकों और बर्तनों को साझा करने का प्रयास करते समय

// next.config.js
const aliasPathsToResolve = [
    { name: 'components', path: path.resolve(__dirname, './components') },
    { name: 'Common', path: path.resolve(__dirname, '../../common/react/') },
]
module.exports = () => {
    return  {
        webpack(config, { defaultLoaders }) {
            config.module.rules.push({
            test: /\.(js|jsx)$/,
            include: [path.resolve(__dirname, '../../common/react/')],
            use: [defaultLoaders.babel],
        })

            /** Resolve aliases */
        aliasPathsToResolve.forEach((module) => {
            config.resolve.alias[module.name] = module.path
        })
        }
    }
}

मैं इस पोस्ट के समय नेक्स्टजे के नवीनतम संस्करण का उपयोग कर रहा हूं।

@ Lwdthe1 मैंने आपके कोड की कोशिश की और शुरुआत में यह त्रुटि मिली:

TypeError: Cannot read property 'then' of undefined
    at getBaseWebpackConfig (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/build/webpack-config.js:85:25)
    at async Promise.all (index 0)
    at async HotReloader.start (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/server/hot-reloader.js:14:1675)
    at async DevServer.prepare (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/server/next-dev-server.js:7:223)
    at async /c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/cli/next-dev.js:22:359

कुछ ट्विकिंग किया और इसके साथ समाप्त हुआ:

const path = require("path");

const libPath = "../components/src"
const aliasPathsToResolve = [
  { name: "Common", path: path.resolve(__dirname, libPath) }
];

module.exports = {
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: [path.resolve(__dirname, libPath)],
      use: [defaultLoaders.babel]
    });

    /** Resolve aliases */
    aliasPathsToResolve.forEach(module => {
      config.resolve.alias[module.name] = module.path;
    });
    return config
  }
};

लेकिन एक और त्रुटि में भाग गया:

export { default as NavBar } from "./NavBar/NavBar"
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1055:16)
    at Module._compile (internal/modules/cjs/loader.js:1103:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
....

जिसका सामना पहले #2850 और #883 में हो चुका है।

तो ऐसा लगता है कि एकमात्र समाधान है: https://github.com/martpie/next-transpile-modules#but -i-really-need-to-make-it-work-with-lerna

मैंने जो सुना है, उसमें से RFC जल्द ही प्रस्तुत किया जाएगा कि कैसे Next.js इस मुद्दे को हल करने की योजना बना रहा है, लेकिन अगर किसी को इसे अभी ठीक करने की आवश्यकता है, तो मैंने https://github.com/ से अपना समाधान npm पर प्रकाशित किया है।

    "next": "npm:@sheerun/[email protected]",

और next.config.js के बाद:

  babelIncludeRegexes: [/turf/],

(मेरे मामले में मुझे बैबेल के साथ पूर्व-संकलित होने के लिए सभी टर्फ फाइलों की आवश्यकता थी)

इस मुद्दे में कोई प्रगति हुई है?

मैं next.js 9.2.0 का उपयोग करता हूं, लेकिन babelIncludeRegexes विकल्प काम नहीं कर रहा है

इस मुद्दे में कोई प्रगति हुई है?

next-transpile-modules लक्ष्य इस समस्या को ठीक से हल करना है, क्या आपने इसे आजमाया?

हाय @martpie ,

पहले से ही मेरी समस्या का समाधान .babelrc फ़ाइल संपादित करें। मैं इस मुद्दे का संदर्भ देता हूं

धन्यवाद

@martpie मैं next-transpile-modules का उपयोग कर रहा हूं लेकिन फिर भी, जब मैं एप्लिकेशन बनाने की कोशिश कर रहा हूं तो मुझे नीचे त्रुटि का सामना करना पड़ रहा है। मैं साझा कोडबेस के साथ मोनोरेपो का उपयोग कर रहा हूं। '@myapp/shared/components/componentname.js' जैसे साझा से घटकों तक पहुंचने का प्रयास कर रहा है। मैं nextjs 9.x और कस्टम next.config.js का उपयोग कर रहा हूं।

त्रुटि
`
मॉड्यूल पार्स विफल: अनपेक्षित टोकन (12:4)
इस फ़ाइल प्रकार को संभालने के लिए आपको एक उपयुक्त लोडर की आवश्यकता हो सकती है, वर्तमान में इस फ़ाइल को संसाधित करने के लिए कोई लोडर कॉन्फ़िगर नहीं किया गया है। देखें https://webpack.js.org/concepts#loaders
| कॉन्स्ट स्पिनर = प्रॉप्स => {
| कॉन्स रेंडरडिफॉल्टस्पिनर = (स्पिनर क्लास, {...अन्य}) => (
>

raghav1086 14 फ़र॰ 2020