<p>لا يسمح gatsby-node.js باستيراد ES6</p>

يتم تشغيل هذا الملف بواسطة node.js لذا فهو يدعم أيًا كان إصدار العقدة الذي تستخدمه. لا يزال دعم وحدة Es6 في العقدة عبارة عن مسح https://medium.com/@giltayar/native -es-modules-in-nodejs-status-and-Future-direction-part-i-ee5ea3001f71

أنا أواجه هذا أيضًا. أحتاج إلى استخدام gatsby-mdx/mdx-renderer ، وحتى إذا قمت باستخدام require ، فإن الملف المطلوب نفسه يستخدم بنية وحدة ES6 وفواصل. هل هناك طريقة لتغيير التكوين لجعل gatsby-node.js يمر عبر Babel؟ سيكون من الرائع أن تكون قادرًا على استخدام JSX بداخله أيضًا ، رغم أنه أقل إلحاحًا بالنسبة لي.

ما هي الخطوات لتمكين دعم import / export في gatsby-node.js ؟ المنشور المتوسط ​​المرتبط بالإشارات باستخدام ملفات .mjs لكنني لا أعتقد أن ذلك سيعمل مع Gatsby؟

هل هناك طريقة لاستخدام babel-node بدلاً من node ؟

أنا استخدم esm لهذا وهو يعمل حتى الآن. هذا ما فعلته:

1. تثبيت esm ( npm i esm )
2. قم بإنشاء ملف يسمى gatsby-node.esm.js في المجلد الجذر الخاص بك (نفس المجلد الذي يحتوي على gatsby-node.js )
3. انقل كل شفرتك من gatsby-node.js إلى gatsby-node.esm.js
4. استبدل جميع الكود في gatsby-node.js بما يلي:
   javascript require = require('esm')(module) module.exports = require('./gatsby-node.esm.js')
5. استخدم import في gatsby-node.esm.js كل ما تريد 🎉

KyleAMathews هل هناك أي شيء خطير في القيام بذلك بهذه الطريقة؟ لأنه إذا كان آمنًا يمكنني إضافته إلى المستندات :)

هذا النمط يعمل بالتأكيد nikoladev! لست متأكدًا من المكان الذي ستذهب إليه في المستندات. أي أفكار @ gatsbyjs / docs؟

إليك كيف فعلت ذلك:

require('babel-register')({
  presets: [ 'env' ]
})
require('babel-polyfill')
module.exports = require(`./gatsby-node.mjs`)

يبدو أنه يعمل بشكل جيد بما فيه الكفاية ولكني أتساءل عما إذا كان قد لا يعبث بذاكرة التخزين المؤقت؟ أعتقد أنه من المفترض إعادة تعيين ذاكرة التخزين المؤقت عند تعديل gatsby-node.js ولكني واجهت مشكلات في ذلك ، على الرغم من أنني لا أعرف ما إذا كانت مرتبطة.

KyleAMathews ماذا عن نقص مصادر المحتوى والبيانات ؟ على الأقل هذا هو سبب استخدامي لها.

إنه نوع من المناظرة المختلفة ، ولكن أي فرصة لاستخدام import يمكن دعمها خارج الصندوق؟ أشعر وكأنني بالنسبة لمشاريع Gatsby الأكبر حجمًا ، فإن ما يحدث في gatsby-node.js يكاد يكون بنفس أهمية الواجهة الأمامية الفعلية ، ومن الممتع ألا تكون قادرًا على البرمجة بطريقة حديثة باستخدام import ، async/await ، وما إلى ذلك بدون اختراق إضافي.

KyleAMathews ، هل هناك طريقة لطلب ملف ES6 محلي؟ على سبيل المثال ، لدي ملف src/utils/article.js يشبه ما يلي:

// src/utils/article.js
import { format } from 'date-fns'

export const createArticleUrl = (a) => (
  `/${format(a.publishDate, 'YYYY')}` +
  `/${format(a.publishDate, 'MM')}` +
  `/${format(a.publishDate, 'DD')}` +
  `/${a.category.urlSlug}` +
  `/${a.urlSlug}`
)

وملفي gatsby-node.js :

// gatsby-node.js
...
const { createArticleUrl } = require(`./src/utils/article`)
...

ووجدت الخطأ:

  Error: .../src/utils/article.js:1
  (function (exports, require, module, __filename, __dirname) { import { format } from 'date-fns'
                                                                ^^^^^^
  SyntaxError: Unexpected token import

أيه أفكار؟ أستخدم الوظيفة لإنشاء عنوان url لمقالاتنا / منشوراتنا وأود استيراده كما أفعل في مكونات React الخاصة بي. شكرا!

تمكنت من حل مشكلتي باستخدام ES5 في ملف src/utils/article.js ، مثل:

// src/utils/article.js
const { format } = require('date-fns')

var createArticleUrl = function (a) {
  return (
    `/${format(a.publishDate, 'YYYY')}` +
    `/${format(a.publishDate, 'MM')}` +
    `/${format(a.publishDate, 'DD')}` +
    `/${a.category.urlSlug}` +
    `/${a.urlSlug}`
  )
}

module.exports.createArticleUrl = createArticleUrl

ثم gatsby-node.js ، مثل هذا:

// gatsby-node.js
...
const { createArticleUrl } = require(`./src/utils/article`)
...

يمكنني أيضًا استيراد createArticleUrl مثل المعتاد في ملفات ES6 ، import { createArticleUrl } from '../utils/article' .

أنا استخدم esm لهذا وهو يعمل حتى الآن. هذا ما فعلته:

1. تثبيت esm ( npm i esm )
2. قم بإنشاء ملف يسمى gatsby-node.esm.js في المجلد الجذر الخاص بك (نفس المجلد الذي يحتوي على gatsby-node.js )
3. انقل كل شفرتك من gatsby-node.js إلى gatsby-node.esm.js
4. استبدل جميع الكود في gatsby-node.js بما يلي:
   js require = require('esm')(module) module.exports = require('./gatsby-node.esm.js')
5. استخدم import في gatsby-node.js كل ما تريد 🎉

KyleAMathews هل هناك أي شيء خطير في القيام بذلك بهذه الطريقة؟ لأنه إذا كان آمنًا يمكنني إضافته إلى المستندات :)

هل الخيار الخامس "استخدم import في gatsby-node.esm.js كل ما تريده"؟

WeZZard أنت على حق تماما! سوف أصلحه في رسالتي.

طريقة أخرى وجدت أن هذا يعمل عن طريق تحديث package.json الخاص بك بما يلي:

  "scripts": {
    "build": "npx --node-arg '-r esm' gatsby build",
    "develop": "npx --node-arg '-r esm' gatsby develop",
    "start": "npx --node-arg '-r esm' npm run develop",
    "serve": "npx --node-arg '-r esm' gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
  },

لا حاجة لإنشاء ملفات جديدة

reaktivo تعمل البرامج النصية الخاصة بك محليًا ولكني لم أتمكن من تشغيلها مع netlify. هل أنت قادر على نشر موقعك على netlify بـ npx ؟

rotexhawk فقط

https://github.com/reaktivo/gatsby-esm/
https://gatsby-esm-example.netlify.com/

تأكد من أنك تقوم بتشغيل npm install --save-dev esm قبل وأن تكوين الإصدار يعمل npm run build بدلاً من gatsby build

تحقق من هذا الالتزام: https://github.com/reaktivo/gatsby-esm/commit/cf620259ac8b118dea38b99409963cb26bf1b240

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

rotexhawk هذا غريب حقًا ، بالنظر إلى أن المشروع الذي أرسلته إليك تم نشره على Netlify ... على أي حال ، إذا كنت بحاجة إلى تجنب npx ، فقد ينجح ما يلي:

  "scripts": {
    "build": "node -r esm ./node_modules/bin/gatsby build",
    "develop": "node -r esm ./node_modules/bin/gatsby develop",
    "start": "npm run develop",
    "serve": "node -r esm ./node_modules/bin/gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
  },

rotexhawk تواصلت مع فريق Netlify ، قد تحتاج أيضًا إلى تحديد NPM_VERSION ، راجع https://www.netlify.com/docs/build-settings/#node -npm-and-yarn

reaktivo ستفعل. شكرا لجميع التعليمات.

أود أن أفكر بشدة في إضافة نهج esm هذا إلى التوثيق ، حيث يشير Gatsby إلى أن وحدات es6 يجب أن تعمل داخل ملف gatsby-node.js. تتم طباعة رسالة الخطأ هذه ، عند مزج الوحدات النمطية:

error This plugin file is using both CommonJS and ES6 module systems together which we don't support. You'll need to edit the file to use just one or the other.

يشير بوضوح إلى أنه يمكنك استخدام وحدات es6.

esm لا يعمل عند استخدام مساحات عمل الغزل. تقول أنه لا يمكن العثور على وحدة مساحة العمل.

في الواقع ، يبدو أنه يعمل فقط مع استيراد المستوى الأول في gatsby-node.ems.js ، وليس لأي شيء يستورده المكون المستورد أيضًا.

على سبيل المثال،

./gatsby-node.ems.js

import foo from "./foo";
const fooText = foo + " more text";

./foo

import bar from "bar";
const foo = bar("whatever");
export default foo;

يلقي خطأ:

Error in "C:\...\gatsby-node.js": Cannot find module 'bar'

نظرًا لأن وحدات العقدة موجودة تقريبًا ، فقد أردت استخدام العقدة بـ --experimental-modules بدلاً من esm .

لقد غيرت البرامج النصية. بدأت في "node --experimental-modules ./node_modules/.bin/gatsby develop" ، وأعيدت تسميتها gatsby-node.js إلى gatsby-node.mjs ، لكني حصلت على

خطأ في "~ / website / gatsby-node.mjs": يجب استخدام الاستيراد لتحميل وحدة ES: ~ / website / gatsby-node.mjs

خطأ: [ERR_REQUIRE_ESM]: يجب استخدام الاستيراد لتحميل وحدة ES: ~ / website / gatsby-node.mjs

يرجى أن تضع في اعتبارك أننا لا ندعمها رسميًا وأن الحلول المذكورة هنا يمكن أن تذهب فقط حتى الآن. ربما لا تتوافق بعض حزمنا حتى الآن مع ميزة العقدة التجريبية هذه أو أنها لن تعمل. يمكننا إعادة النظر في هذا الموضوع عندما تكون الأمور مستقرة.

الآن بما أن وحدات ES لم تعد تجريبية ،

لا تزال تجريبية ولم تنته بعد. فقط تم إزالة العلم

ومع ذلك ، يظل التنفيذ تجريبيًا وعرضة للتغيير

لقد تعمقت في هذا ، و IMO لا يستحق الألم بعد. انتظر حتى يتم تنفيذ اللوادر أو استخدم حزمة esm .

هل وجد احد حلا باستخدام بابل؟ سيكون من الرائع لو تمكنت من ترك تكوين بابل الخاص بي في مشروع غاتسبي ، وعمل كل شيء.

باستخدام gatsby ، ولكن بعد ذلك الاضطرار إلى العودة إلى module.exports يبدو حقًا خطوة كبيرة إلى الوراء.

Modern web tech without the headache -> ليس كثيرًا :(

npm i esm

ثم قم بتعديل أوامرك لتبدو كما يلي:

https://github.com/wesbos/awesome-uses/blob/master/package.json#L39 -L42

wesbosreaktivo هل أنت قادرة على استخدام هذا الإصلاح لا يزال مع أحدث غاتسبي (2.22.17 في حالتي)؟

لقد عملت دون أي مشاكل في استخدام هذا الحل ، ولكني قمت بتحديث gatsby اليوم وبدأت في الحصول على أخطاء الاستيراد مرة أخرى:

""

npx - وضع node-arg '-r esm' gatsby

خطأ # 10123 التكوين

لقد واجهنا خطأ أثناء محاولة تحميل gatsby-config الخاص بموقعك. يرجى تصحيح الخطأ والمحاولة مرة أخرى.

خطأ: /project/gatsby-config.js:1
(الوظيفة (الصادرات ، تتطلب ، وحدة ، __filename ، __dirname) {import urlJoin من "url-Join" ؛
^ ^ ^ ^ ^ ^
SyntaxError: لا يمكن استخدام عبارة الاستيراد خارج الوحدة النمطية ""

كبديل ، قد ترغب في استخدام TypeScript لملفات gatsby-* .

لقد توقفت خدعة esm أعلاه عن العمل. حتى أنني تراجعت عن إصدار gatsby وإصدار العقدة واستمر.

قم بالتفصيل هنا إذا كان لدى أي شخص نفس المشكلة: https://github.com/reaktivo/gatsby-esm/issues/1

caycecollins هل وجدت إصلاحًا؟

wesbos انتهى بي الأمر بالعودة إلى es5 يتطلب الآن :(

تحرير: لقد لاحظت للتو الإصلاح الأخير الخاص بك هنا https://github.com/gatsbyjs/gatsby/issues/24925 ... سأجرب ذلك!

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

[build]
  command = "npm run build"
  publish = "public"

تجدر الإشارة إلى أنه نعم ، لقد نجح هذا الأمر بالنسبة لي:

"build": "NODE_OPTIONS='-r esm' gatsby build",

واو ، أنا أفهم أن التغيير صعب ، لكن ES Modules أصبحت Javascript الآن ، لذلك من المخيب للآمال حقًا أن نرى (لأي أسباب صحيحة تمامًا) يقاتل المشرفون ضد دعم Javascript_ ... خاصة عندما يقوم JDalton وحزمته esm من السهل جدا!

ملاحظة: بعض التفاصيل ذات الصلة التي قد لا تكون على دراية بها ...

• هذا إصلاح من سطرين. ما لم غاتسبي لديها عدة "نقاط الدخول"، وPR كامل لإصلاح هذا سيكون ثلاثة خطوط: package.json دخول ل esm حزمة، وخطوط:

require = require("esm")(module/*, options*/)
module.exports = require("./main.js")

• هذه الوحدة مستخدمة بالفعل على نطاق واسع في المكتبات الكبرى مثل Knex. يوجد حرفيا 135 ... _آلاف _ مكتبة تعتمد عليها بالفعل!

• تم كتابته من قبل مبتكر لوداش ، لذلك هذا ليس أول مشروع NPM من Junior Engineer: إنها مكتبة جادة كتبها محترف متمرس

• إنه متوافق تمامًا مع الإصدارات السابقة: ما لم يستخدم شخص ما import أو export في رمز الوحدة النمطية بخلاف ES (وأنا متأكد تمامًا من أن هذه الكلمات الرئيسية المحظورة من JS منذ فجر التاريخ) كلها موجودة سيستمر الرمز في العمل بنفس الطريقة

• إذا كان هناك أي نوع من المخاوف المتعلقة بالأداء ، فمن السهل جدًا "الاحتفاظ بالبوابة" هذه الميزة باستخدام وسيطة سطر الأوامر (على سبيل المثال ، اختار knex السير في هذا المسار)

إذن فهي "اكتساب ميزات لغة جافا سكريبت الحديثة بثلاثة أسطر من التعليمات البرمجية" أو ... قاتل من أجلها؟ المنفعة.

إذا كان هناك اهتمام ، فسأكون سعيدًا جدًا لتقديم PR :)

هل يمكن لأي شخص تقديم حل نهائي وقفل هذا الخيط؟

كره القيام بهذه الرقصة المتمثلة في تصفية جميع التعليقات في قضايا مهمة حقًا ولكنها مغلقة على ما يبدو حيث لا تزال المحادثة تحدث وتحاول التدقيق في جميع التعليقات لمعرفة أيها لديه أكبر عدد من الإبهام ومن المرجح أن يكون الحل الأفضل 😔

كما قلت ، الجزء الصعب ليس جعل الوحدة النمطية esm تعمل: إنها مصممة لجعل الأمور بسيطة للغاية . سأقدم PR بنفسي إذا كنت أعرف أي شيء عن هندسة Gatsby (ومرة أخرى ، لرؤية مكتبة رئيسية أخرى تستخدمه فقط انظر إلى Knex ).

الجزء الصعب هو مجرد الحصول على مشرف بهذه المعرفة ليهتم:

كنت تعتقد أنه حتى لو كان لدى كل مشرف شخصية

كما قلت ، الجزء الصعب هو _ لا _ جعل الوحدة النمطية esm تعمل: إنها مصممة لجعل الأشياء _ للغاية_ بسيطة. سأقدم PR بنفسي إذا كنت أعرف أي شيء عن هندسة Gatsby (ومرة أخرى ، لرؤية مكتبة رئيسية أخرى تستخدمه فقط انظر إلى Knex ).

الجزء الصعب هو مجرد الحصول على مشرف بهذه المعرفة ليهتم:

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

أي كلمة من المشرفين حول هذا الموضوع ، من فضلك؟