Next.js: إضافة دعم إلى وحدات transpile داخل node_modules

• لماذا هذا غير قابل للتنفيذ مع امتداد webpack() ؟
• transpileModules أفضل
• هل سنقبل regexps؟

لماذا هذا غير ممكن مع امتداد webpack ()؟

أتمنى أن تقصد تهيئة حزمة الويب المخصصة. هذا ممكن. لكن هذا يجلس في محمل موجود. الحصول على ذلك أصعب إلى حد ما.

transpileModules أفضل

مذهل. سوف أقوم بالتحديث.

هل سنقبل regexps؟
نعم. بالتأكيد.

مهلا،

نظرًا لأنني أبدأ موقع الويب الخاص بي ، فأنا أحاول استخدام تقنيات جديدة مثل Lerna / Next / Styled ... وسيسعدني تقديم ملاحظات مبكرة حول هذا الأمر.

لقد فتحت مشكلة مكررة حيث حاولت استيراد / تحويل وحدة قائمة على CRA في وحدة NextJs الخاصة بي ولكن لم أكن أعرف كيفية إجراء عملية التحويل (لاحظ أنني أرغب في الاحتفاظ بالوحدة النمطية الخاصة بي قيد التشغيل كوحدة مستقلة)

لقد لاحظت أيضًا أن Babel ، الذي يستند أيضًا إلى Lerna ، يقوم بنقل كل وحدة قبل تعريضها ، ولكن يبدو لي أن أفضل أن أفعل مثل اقتراح arunoda والسماح لتطبيق العميل بإجراء التحويل.

أرغب في الحصول على تكوين babel واحد لعميلي ومشاركة هذا التكوين مع جميع الوحدات النمطية المنفصلة. ربما لا يكون هذا سهلاً إذا كنت أرغب في الاحتفاظ بالقدرة على تشغيل الوحدات النمطية الخاصة بي بشكل مستقل ، خارج عداء التالي

مشروع الاختبار الحالي الخاص بي هنا: https://github.com/slorber/playground/ سأحاول ترقيته بمجرد وجود مفترق / علاقات عامة. arunoda هل تعمل على ذلك؟

slorber حاليًا نحن نركز على الإصدار 2.0

لم أبدأ العمل على هذا ولكن يمكننا القيام بذلك بعد 2.0.

حسنًا ، سأصنع شوكة. أنا أعمل بالفعل ضد الإصدار التجريبي 2.0.0 لأنني لا أقوم بإنشاء موقع ويب هام ولا أعتقد أن webpack 1.13 يحل jsnext: main / module field.

لست خبيرًا في التجميع ، لكنني أعتقد أنني أفضل استخدام حقل "وحدة" للحزمة. json ، أليس كذلك؟ يبدو "main" للشفرة المنقولة بالفعل بقدر ما أعرف. ولكن نظرًا لأن تهيئة webpack تسمح بتضمين / استبعاد عملية التحويل ، فأنا لست متأكدًا من أنها ذات صلة. أي توصية بشأن أي من الحقول الثلاثة أفضل استخدام؟

slorber أعتقد أن webpack يدعم main تمامًا مثل NPM. يمكنك استخدام ذلك.
يمكننا التحقق من مسار الملف في الوظيفة exclude في next.conf.js

حسنًا ، وفقًا لما رأيته عمليًا مقابل الإصدار 2.x التالي ، رأيت أن الوحدة تعمل (لكنها فشلت لاحقًا في وقت التشغيل بسبب عدم نقلها) بينما لم يعمل jsnext: main (على حد ما أتذكر). لكن من المفترض أن يتم دعمه .

على أي حال ، لا يبدو أن jsnext: main أو module هي الحل لهذه المشكلة ، لذا بالنسبة للوحدات الداخلية للشركة ، فإن مجرد تمكين عملية النقل ربما يكون كافيًا

لم يتفق المجتمع على نهج واحد أليس كذلك؟ على سبيل المثال ، تمكنت من استخدام react-youtube الآخر خارج الصندوق دون أي مشاكل. أفترض عددًا كبيرًا من الوحدات transpile قبل النشر؟

المرجع: https://github.com/rauchg/blog/blob/master/components/post/youtube.js

نعم ، من المنطقي أن تقوم بالترجمة دائمًا قبل النشر لأنك لا تعرف من / كيف سيتم استهلاك الوحدة ولا تريد إجبار العميل على إعداد إعدادات babel المناسبة لـ lib الخاص بك. هذا ما يقترحه التراكمي : نشر الوحدة النمطية بطرق مختلفة بحيث يمكن لمجمع التجميع أن يقرر أيها يستخدم.

ولكن بالنسبة للحزم الداخلية للشركة ، قد تكون إعدادات الترجمة هي نفسها عبر العديد من المشاريع (مثل إعداد babel المسبق) ومن المنطقي بالنسبة لي السماح لمجمع العميل بترجمة جميع تبعيات الشركة

موافق تمامًا على slorber - سيكون هذا مفيدًا جدًا للوحدات الداخلية إذا كنت

وسيكون rauchg / arunoda الذي يدعم RegExp

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

اقتراح جميل philcockfield

مهلا ، قد يكون من المفيد تقديم بعض الإعدادات المسبقة. يبدو لي أن معظم الأدوات (رابط Lerna / npm ...) تعتمد على الروابط الرمزية ، فلماذا لا يكون شيئًا بسيطًا مثل:

`` جافا سكريبت
module.exports = {
transpileModules: ["الروابط الرمزية"]
}
""

كلما استخدمت next.js بشكل جدي ، وقمت ببناء مكتبة غنية من الوحدات حولها ، كلما أصبحت هذه الميزة أكثر أهمية. لقد أصبح بيتا حقيقيًا يكرر خطوة تجميع بابل في الوحدات الداخلية الخاصة بي.

🚀🤖

أنا أعمل على هذا اليوم :)

philcockfield جرب هذه المحاولة: https://github.com/zeit/next.js/pull/749

شكرا arunoda

لذا كما علق على العلاقات العامة الخاصة بك إذا كان هذا لا يدعم الروابط الرمزية ، فستكون الميزة محدودة بعض الشيء لأنها لن تعمل مع رابط npm أو Lerna ، ولكن فقط لوحدات npm التي لم يتم نقلها (أليس كذلك؟ لا أرى أي شيء آخر usecase ما لم تقم بتنفيذ وحدات داخل /node_modules )

لماذا لا تدعم الروابط الرمزية؟ هل من الصعب دعمها؟

أردت أيضًا اختبار فرعك على تطبيقي ، لكنني لست متأكدًا من أفضل طريقة للقيام بذلك. هل هناك أي إجراء معروف حتى نتمكن من اختبار الفرع بسهولة وهو ليس مؤلمًا للغاية بالنسبة للمختبِر؟ لقد جربت بعض الأشياء مثل:

• npm تثبيت https://github.com/arunoda/next.js.git#add -706: فشل لأن المجلد التالي / bin فارغ في github repo
• git clone of the fork inside / node_modules: ليس نجاحًا كبيرًا (ولكن قد يكون ذلك بسبب إعدادات Lerna الخاصة بي)

ما هي أفضل طريقة لاختبار الشوكة حاليًا؟

إذا كنت تبحث عن القيام بذلك باستخدام 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
...

هل هناك أي حل لهذا من فضلك؟

Arunoda سيعمل عليها في وقت ما هنا. لقد فعل ذلك من قبل في # 749

أرغب في رؤية هذه الميزة مطبقة. كما ذكر philcockfield ، من السيناريوهات الشائعة إنشاء مكتبة من الوحدات التي تعتمد على نقل Next.js ، وسيكون من الرائع أن تكون قادرًا على مشاركة المكونات بين المشاريع.

هذا ليس فقط مطلوبًا لهز الشجرة. أيضًا لمكونات babel الإضافية مثل styled-jsx . لذلك ، إذا كان لديك وحدة نمطية (مثل مكتبة) تستخدم مكونًا إضافيًا من babel ، فإن أفضل حل هو تضمين شفرة مصدر ES6 والسماح لتطبيقك بنقلها من node_modules. بالطبع يتضمن التالي بالفعل 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) لقد تم transpiling 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
• سيساعدك ما يلي عند استخدام الوحدات المرتبطة بـ npm:
  https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js#L168

أنا لا أستخدم next.js لكني آمل أن يساعد.

damianobarbati لا ، للأسف لم يحدث ذلك
تكوين حزمة الويب مباشرة لتحويل أي شيء ليس صعبًا ، لكنني أجد صعوبة في جعل هذا العمل في سياق Next.js

مرحباً بالجميع ، هل وجد أحد حلاً؟

لدي وحدة عقدة مرتبطة ES6 محلية وأحتاج إلى استيرادها في مشروعي ولكن لا يمكنني الحصول على حزمة webpack بالشكل الصحيح!

أنا متأكد من أن هناك طريقة أفضل ، لكننا ندير كل شيء من خلال Babel on build:

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

هل مات هذا؟ أنا أبحث عن طريقة لتحويل وحدة مخصصة ويبدو أنها لا تزال غير ممكنة.

mattfelten إنه على خريطة الطريق لـ v5 👍

هل لدى أي شخص مثال على حل بديل لهذا؟

timneutkens هل هناك أي جدول زمني لهذا؟ قدّر أن هذا سؤال مستحيل غالبًا ولكننا نحاول تحديد مجموعتنا في العمل اعتبارًا من الآن وهذا مانع كبير جدًا بالنسبة لنا! :)

اقتراحات الحل أيضا صالحة.

أدرك thealjey أن هذا تعليق قديم ولكن ربما لم ينجح الحل الذي include محدد أيضًا والذي يجب تجاوزه.

تحديث: بحثت في هذه الإستراتيجية ولكنها ليست عاقلة بالنظر إلى جميع أدوات التحميل المختلفة لأدلة الوحدات المختلفة ضمن التكوين الداخلي لـ next.js. يجب أن يكون هذا من الدرجة الأولى.

chrisui كان الحل (المؤقت) الخاص بي هو استخدام محلل وحدة البرنامج المساعد babel ، الذي تم تكوينه على هذا النحو - "plugins": [["module-resolver", {"root": ["./"]}]]
إنه ليس حلاً مثاليًا بأي حال من الأحوال ، ولكن نظرًا لأن كل شيء آخر فشل ، فهو يعمل في الوقت الحالي
بفضل ذلك ، لست بحاجة إلى كتابة مجموعة من ../ مع كل استيراد
قد يكون هذا في الواقع حلاً أفضل للبعض ، على الرغم من أنه لا يساعد بالتأكيد في إعادة الاستخدام

thealjey هل يمكنك إعطاء مثال؟
لدي إعداد مشروع حيث أحاول هذا دون جدوى ...
https://github.com/jamesgorrie/nappy

من دواعي سروري أن أحاول الحصول على العلاقات العامة لأن هذا سيجعل حياتنا أسهل كثيرًا ، ولكن هناك بعض الأسئلة مثل: هل يجب أن يدعم next.js تحويل بعض الوحدات أو يجب أن يكون هذا الأمر متروكًا لمحول الصوت ، ولكن يتبع next.js دقة الوحدة بشكل أكثر صرامة. لست متأكدًا من الذي تسأله أو من أين تبدأ هنا كجديد إلى next.js .

إنه على خريطة الطريق لـ v5 👍

timneutkens هل جعله هذا في

أتساءل أن تعرف.

فقط انظر إلى المكان الذي تم دمجه فيه. تم دمج هذا منذ 8 أيام. تم إصدار 5.0.0 منذ يومين. من فرع الكناري حيث تم دمج هذا في ...

هل لدى أي شخص مثال على كيفية تنفيذ ذلك؟ هل من المفترض أن تعمل بهذه الطريقة كما ذكرنا سابقاً؟

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

أم أنها تبدو مختلفة؟

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

انا مرتبك. timneutkens الارتباط المذكور أعلاه للعلاقات العامة لا يزال مفتوحًا. هل لم يتم دمج هذا في v5 حتى الآن؟

تحرير: لا تهتم ، هذه مجرد علاقات عامة لتسليط الضوء على المثال.

إنه مثال ، يمكنك استخدام المثال دون أن يتم دمجه. transpileModules شيء سنتعامل معه لاحقًا.

كقاعدة عامة: عندما تكون قضية مفتوحة لا يتم تحريرها.

brianyingling لقد حولت المثال إلى مكون إضافي لحل مؤقت (الإصدار 5 فقط).
إنه يعمل من أجلنا في الوقت الحالي ، حتى يتم وضع حل رسمي أكثر قوة.

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

أود أن أرى مثالاً على هذا لوحدة واحدة في كود التطبيق.

على سبيل المثال ، لدي وحدة نمطية أستخدمها من جانب الخادم والعميل. لم أتمكن من تشغيل أي من الأمثلة المذكورة أعلاه ، إما عن طريق تحليل الوحدة في الوحدة النمطية المنفصلة الخاصة بها و yarn link ing it ، أو عن طريق اختراق قواعد webpack.

إليك نسخة بسيطة: 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 في الوحدة المشتركة. أعتقد أن الحل الخاص بي قد يكون إزالة غير متزامن / انتظار وتغيير كل شيء إلى عمليات رد على نمط .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 يستخدم صادرات CommonJS و 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",
   ...

الآن تمر اختبارات Mocha الخاصة بي على جانب الخادم ، ويبدأ خادم Koa المخصص الخاص بي بشكل جيد ، ولم يعد هناك المزيد من الجنون Cannot assign to read only property 'exports' of object '#<Object>' في صفحات NextJS الخاصة بي.

واجهت نفس المشكلة عند الترقية إلى NextJs 5.1.0. لم تكن واحدة أو اثنتين من وحدات العقدة التالية ترشح وظائف سهم الدهون وتلقي بأخطاء في IE11. لقد مررت سابقًا بإعداد polyfills الفردية وفي النهاية اخترت استهداف ملفات الوحدات مع babel-polyfill في next.config.js مع هذا:

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

أمل أن هذا يساعد شخصاما.

يعمل ESM مثل السحر.

باستخدام خادم Next.js المخصص في index.js ، يمكنني تشغيل هذا الأمر لبدء تشغيل الخادم وعبارات esm بشكل مثالي ، وحل وحدات ES في حزم مشروع Lerna ذات الارتباط الرمزي.

node -r esm index.js

curran cool ، هل يمكن أن يحل محل عقدة بابل؟

curran سأتجنب فعل ذلك في الإنتاج

تضمين التغريدة

thealjey لماذا هذا؟

في حال كان أي شخص يبحث عن حل سريع وسهل ، فإليك ما فعلته. لقد أنشأت دليلًا فرعيًا ، shared/ ، مع أي رمز نريد تشغيله على كل من الواجهة الخلفية عبر برنامج Node النصي المستقل والعميل عبر NextJS. لها 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 يجعل رابط رمزي.

بالنسبة لأولئك الذين يستخدمون TypeScript ، يجب ألا يعمل @weco/next-plugin-transpile-modules . لقد أنشأت شوكة للتعامل مع Next's withTypescript : https://github.com/KeitIG/next-plugin-transpile-modules

ما زلت بحاجة إلى معرفة كيفية القيام بالأشياء بشكل صحيح عندما نحتاج إلى كود من جانب الخادم في TypeScript أيضًا.

أي أخبار عن هذا؟

bogdansoare أنا أستخدم https://github.com/KeitIG/next-plugin-transpile-modules

وهناك شخص آخر من قبلي ، في الجوهر التالي. إنه يتعامل مع TypeScript ، وكذلك حزم محددة من @scope ، بدلاً من جميع الحزم. https://gist.github.com/trusktr/44400d0d016c506629b4f914799dc9cd

لقد قمت للتو بتجميع مثال عملي بسيط يستخدم esm و lerna

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

/ ccjdalton

شخصيًا حصلت على هذا العمل مع 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 ، وهو ما أحتاجه لتحقيق التوافق مع IE 11 ...

أود أيضًا أن أقدر حلاً لهذا ، وأكافح مع إضافة حزم npm غير المنقولة إلى مشروعي. اضطررت إلى تنزيلها للبائع / في الوقت الحالي :(
حقا مزعج

@ bel0v أعتقد أنه يجب أن تكون قادرًا بالفعل على تحقيق ذلك باستخدام next-plugin-transpile-modules . من المحتمل أن يتم إغلاق هذه المشكلة. سم مكعب / timneutkens

ما زلت أرغب في البحث عن حلول بديلة.

كتب Jamie مؤخرًا سلسلة رسائل مفصلة للغاية حول مسألة تجميع node_modules: https://twitter.com/jamiebuilds/status/1080840492525350912

قرأت الموضوع الذي كتبه جيمي ، على الرغم من أنني أود أيضًا مشاركة رأي هنري تشو وبابل في هذا الموقف والحل.
https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages

(لا أختلف مع تيم ، فقط اعتقدت أنني سأشارك ، العديد من الإيجابيات والسلبيات. قد تساعد تيم في البحث عن حلول بديلة)

نعم ، لقد تحدثنا مع العديد من الأشخاص حول هذه المشكلة خلال نصف العام الماضي ، بما في ذلك Henry 😄

على الرغم من المخاوف بشأن تحويل وحدات node_modules ، فإن الرغبة في تحويل الحزم الخاصة بك في monorepo هي مطلب شائع جدًا ، ولا تنطبق عليه هذه المخاوف

dcalhoun لقد جربته ولكن للأسف ما زلت أتلقى خطأ رمز غير متوقع. هناك مشكلة 7 Next مفتوحة على هذا المكون الإضافي والتي قد تكون ذات صلة

تضمين التغريدة

يجب عليك قراءة الأسئلة الشائعة ؛) هناك حل لهذه المشكلة: https://github.com/martpie/next-plugin-transpile-modules#i -have-trouble-making-it-work-with-nextjs-7

لقد كنت أستخدم هذا المكون الإضافي في مشاريع متعددة ، وقد تم إنجاز المهمة بشكل جيد. الإصدار السابع التالي غريب ، لست متأكدًا مما إذا كان هذا قادمًا من Next أو Babel ، لقد فتحت مشكلة هنا على أي حال: https://github.com/zeit/next.js/issues/5393

@ مارتبي نعم أعتقد أنني حاولت ذلك .. على أي حال

martpie لقد بدأنا في استخدام next7 مع babel.config.js ثابت ومساحات عمل الغزل ، قد أرى ما إذا كان بإمكاني إعداد مثال بسيط.

لقد تفرع عن المثال الأساسي هنا
https://github.com/bel0v/learnnextjs-demo
في ذلك ، قمت بتثبيت تبعية غير مترجمة (عناصر سلكية) ، وحصلت على خطأ في الإنشاء Unhandled Rejection (SyntaxError): Unexpected token { وحاولت إصلاحه بالطريقة المقترحة.
أفكر ربما أحتاج إلى بعض ملحقات babel الإضافية حتى تعمل .. 🤔

@ bel0v في الأسئلة الشائعة مرة أخرى ، هناك تفسير لماذا لا تعمل إعدادات Lerna (TL ، DR ؛ من المحتمل أنك تستخدم خطأ)

@ مارتبي آه ، فهمت! لم أدرك أن حزمة الطرف الثالث تم إعدادها مع Lerna. شكرا

يبدو أنه تم تعليق https://twitter.com/jamiebuilds ، لذلك لا يمكن قراءة الموضوع هناك بعد الآن. # 3018 تم إغلاقها في إشارة إلى هذه المشكلة ، لذلك أتساءل ما هي الأساليب البديلة التي يتم النظر فيها؟
هل تمثل هذه أحدث ممارسات next.js لحالات الاستخدام هذه؟
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 كنت أستخدم الإعداد التالي ، والذي عمل بشكل رائع.

لسوء الحظ ، توقف عن العمل في Next.js 8.x بسبب الأخطاء التي فشلت فيها الوحدات النمطية في استيراد الوحدات النمطية الأخرى نظرًا لعدم توفر تصدير افتراضي لها. ثم توصلت إلى التكوين أدناه لـ Next.js 8.x ، والذي يقوم فقط بنقل الكود في 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
  },
}

التالي. js 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 خيار تحويل 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'.

لهذا السبب قمت بالتبديل إلى تقديم تهيئة babel المخصصة لـ node_modules/ ، والتي تقوم فقط بنقل الكود باستخدام preset-env ، وتتخطى التحويلات الخاصة بـ Next.js. ما رأيك في هذا النهج؟

هتاف 🍻

LinusU ربما جرب transpileModules: ['(.*?)'] وأخبرني إذا كان يعمل؟

لكنها قد لا تعمل في إصدار رئيسي مستقبلي ، لذا كن حذرًا.

بشكل عام ، لا أوصي (اقرأ "مثبط للغاية") لتحويل المجلد node_modules بالكامل ، فسوف يستغرق الأمر وقتًا طويلاً للترجمة ويجب أن توفر الحزم رمزًا متوافقًا مع ES3 (لذلك متوافق مع IE11).

فقط قم بترجمة الوحدة التي تحتاج إليها! (مثل lodash-es ، وحدات محلية ، إلخ ...)

يجب أن توفر الحزم رمزًا متوافقًا مع ES3 (لذلك متوافق مع IE11).

هذا ليس الواقع الذي رأيته ، وأنا في الواقع لا أوافق. لن يعرف مؤلفو الوحدة أبدًا المتصفحات التي أستهدفها بالضبط ، وإذا قاموا بشحن كود قديم ، فمن المحتمل أن يعاقبوا المستخدمين الذين يستهدفون المتصفحات الحديثة.

سوف يستغرق الأمر وقتًا طويلاً لتجميعه

إنه بطيء بعض الشيء عند بدء التشغيل بالنسبة لي ، ولكن بعد ذلك ، يبدو أنه تم تخزينه مؤقتًا وعند إجراء تغييرات على صفحة معينة أرى عمليات إعادة تحميل شبه فورية.

فقط قم بترجمة الوحدة التي تحتاج إليها!

سيتطلب ذلك مني أن أعرف بالضبط الحزم المتوافقة مع IE11 وأيها ليست كذلك ، بالإضافة إلى الحفاظ على تحديث هذه المعلومات في أي وقت أي تغييرات تبعية (حتى التبعيات العابرة). لا أرى كيف هذا واقعي 🤔

الشيء المهم هو أن نقاط إدخال ESM المتوفرة في package.json module هي عادةً ES5 مع استيراد / تصدير ES6 لهز الشجرة. لذا فهذه هي مهمة الحزم (Webpack) وليس transpiler (Babel) ، ما لم يُنص على خلاف ذلك. تحتوي الكثير من الحزم التي تم الحفاظ عليها جيدًا على نقاط دخول 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']
    }
},

واجهت هذه المشكلة باستخدام Lerna mono repo وكنت أخدش رأسي لمعرفة السبب. نظرًا لأن الخطأ يأتي من حزمة الويب ، فإنه لا يقدم تفاصيل جيدة بالإضافة إلى أنه يفتقد أداة تحميل ، وهو أمر غير مفيد. لحسن الحظ وجدت مشكلة جيثب هذه!

سأترك الحل هنا لأي شخص آخر يبحث عن هذه المشكلة ويستخدم أيضًا Lerna:

قم بإنشاء نص برمجي ما قبل النشر للحزمة المشتركة التي تنقل المصدر إلى دليل dist وأخبر Lerna أن يشير إلى دليل dist عند الربط:

// 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 ، سيتم تشغيل البرنامج النصي قبل النشر وترجمة المصدر حتى يتمكن Next من استهلاكه.

إذا كنت تستخدم lerna فيمكنك عمل روابط رمزية ليتم تحويلها باستخدام وحدات transpile-next . كيفية استخدام هذه الحزمة مع 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
        })
        }
    }
}

أنا أستخدم أحدث إصدار من NextJs وقت هذا المنشور.

@ 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 لحل هذه المشكلة ، ولكن إذا احتاج شخص ما إلى إصلاحها الآن ، فقد قمت بنشر الحل الخاص بي على npm من https://github.com/ zeit / next.js / pull / 10098 يمكنك استخدامه بوضع ما يلي في package.json:

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

ومتابعة next.config.js:

  babelIncludeRegexes: [/turf/],

(في حالتي ، كنت بحاجة إلى تجميع جميع ملفات العشب مسبقًا مع بابل)

هذه القضية لديها أي تقدم؟

أستخدم next.js 9.2.0 ، لكن الخيار babelIncludeRegexes لا يعمل

هذه القضية لديها أي تقدم؟

يهدف next-transpile-modules إلى حل هذه المشكلة بالضبط ، هل جربتها؟

مرحبًا @ مارتبي ،

حل مشكلتي بالفعل. تعديل ملف babelrc. أشير إلى هذه القضية

شكرا

martpie أنا أستخدم next-transpile-modules ولكن ما زلت أواجه الخطأ أدناه بينما أحاول إنشاء التطبيق. أنا أستخدم monorepo مع قاعدة بيانات مشتركة. محاولة الوصول إلى المكونات من مشاركة مثل "@ myapp / shared / components / componentname.js". أنا أستخدم nextjs 9.x والمخصص next.config.js .

خطأ
"
فشل تحليل الوحدة: رمز مميز غير متوقع (12: 4)
قد تحتاج إلى أداة تحميل مناسبة للتعامل مع هذا النوع من الملفات ، حاليًا لم يتم تكوين أي برامج تحميل لمعالجة هذا الملف. راجع https://webpack.js.org/concepts#loaders
| const Spinner = props => {
| const renderDefaultSpinner = (spinnerClass، {... others}) => (
>

@ raghav1086 هل يمكنك فتح مشكلة في الريبو؟ ؛) سوف يتجنب الضوضاء للأشخاص هنا.

+1

لديّ دليل src/ لمشروعي و lib/ لإطار عمل بداية يقوم بتصدير بعض الأدوات / الأغلفة الشائعة التي أعيد استخدامها عبر بعض تطبيقات nextjs المختلفة (نقطة البداية)

لا يتم ملاحظة lib عند بدء تشغيل خادم dev. أي مكونات من lib / لا تمر عبر المحمل وتعطي خطأ

لقد استخدمت شكلًا مختلفًا من حل @ Lwdthe1 (https://github.com/zeit/next.js/issues/706#issuecomment-569041997) لإصلاح مشكلة src و lib في تعليقي أعلاه. نفس الشيء بشكل أساسي ما عدا هذا يستخدم config.resolve.modules بدلاً من التكرار خلال مصفوفة aliasPathsToResolve .

  webpack: (config, options) => {
    config.resolve.modules = [
      './src/',
      './lib/',
      'node_modules'
    ];

    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: [path.resolve(__dirname, './lib/')],
      use: [options.defaultLoaders.babel],
    });

ما هو حل عملي لـ lerna و nextjs و babel هذه الأيام؟

أحاول تجنب التحويل المسبق لمكتباتي قبل الاستيراد ، وقد اصطدمت بحائط من الطوب مع كل حل هنا. إليك ما لا يمكنني الحصول عليه:

• next-transpile-modules .
• إعادة ضبط إعدادات الضبط المسبق.
• تحديث قواعد next-babel-loader include و exclude للنجاح / الفشل على التوالي.

mikestopcontinues next-transpile-modules عملت خارج الصندوق بالنسبة لي مع TypeScript.

calebmpeterson و @ مارتبي (أراك! 👀). عدت إلى القابس ، ويبدو أن المشكلة هي أنه لا توجد طريقة للإشارة إلى الوحدات الفرعية. على سبيل المثال ، لن يدعم النمط "@ mono / components" استيراد "@ mono / components / Div" أو أيًا كان. وتحديد "@ mono / component / Div" لأن النمط لا يعمل أيضًا ... لا يعني ذلك أنني أرغب في القيام بذلك لكل مكون مشترك. لقد جربت أيضًا الهندسة العكسية لجيل regex لإنشاء أنماط مطابقة ، وبينما يعمل regex الناتج ، هناك شيء آخر يحدث تحت غطاء المحرك ليس كذلك.

من الناحية المثالية ، أود فقط تحديد "@ mono" للاعتناء بكل شيء ، وترك package.json الخاص بي ليكون المصدر الوحيد للحقيقة لما يعتمد عليه كل تطبيق من تطبيقاتي. وبالمثل ، أود تجنب الاحتفاظ بملفات الفهرس التي تقوم باستيراد / تصدير كل شيء في كل ملف من libs الخاص بي لمجرد التمكن من الوصول إلى الوحدات الفرعية.

للرجوع إلى الوراء ، أعتقد أنه يمكن حل المشكلة الحالية تمامًا إذا كانت هناك طريقة ما لتمرير rootMode: 'upward' عبر next-babel-loader ، حتى يتمكن بابل من التعامل مع منطق التحويل. ربما يفتح هذا الأمر مشكلات أخرى ذات صلة بـ Next ، ولكن يبدو أن جذر المشكلة هو الطريقة غير المعتادة التي يتشابك بها Next في webpack و babel. بالتأكيد ، هناك طريقة لترك babel-loader منفصلاً عن منطق Next الإضافي؟

مجرد تحديث على الواجهة الأمامية next-transpile-modules . لقد أخطأت في تشخيص الخطأ. لا يعمل الاستيراد باستخدام هذه الطريقة (الفهرس أو الوحدة الفرعية) إذا كنت بحاجة إلى تهيئة .babelrc مخصصة. لا يتم تطبيق الإعدادات المخصصة على الكود المطلوب. هذه مرة أخرى مشكلة rootMode: 'upward' .

mikestopcontinues تحتاج إلى استخدام babel.config.js (التكوين العام) مع next-transpile-modules ، وليس .babelrc (التكوين المحلي) ، هذا موضح في الأسئلة الشائعة ؛)

@ مارتبي ليس لديك أي فكرة عن مدى

حطمت الوحدات النمطية التالية transpile React بالنسبة لي. إنه يرمي الآن أنني أستخدم خطافات غير صالحة ، بينما قمت بنقل ثلاثة أمثلة على الوحدة النمطية

هل يمكن لشخص ما إعادة التكرار على أفضل تكوين حتى يعمل الترشيح. لا أحصل على ما يجب أن أكتبه في babel.config.js

masbaehr في معظم الحالات ، ما next-transpile-modules لإعداد التكوين التالي

المشكلة الوحيدة هي أن next-transpile-modules لا يدعم Yarn 2 pnp.