Gatsby: هل من الممكن كتابة تكوين gatsby في TypeScript؟

سيكون من الرائع إضافة دعم لهذا. ربما يمكن للمكوِّن الإضافي Typescript الحالي إضافة require('ts-node/register')

سيكون هذا حلا جيدا.

إغلاق هذا على الأرجح لن يدعمه أبدًا في جوهره.

ملاحظة سريعة لأي شخص يتطلع إلى القيام بذلك - إنها واضحة جدًا. فقط أضف ts-node بنفسك وأضف الخطاف في gatsby-node.js قبل تحميل ملفات TS:

require('source-map-support').install()
require('ts-node').register({
  compilerOptions: {
    module: 'commonjs',
    target: 'es2017',
  },
})

// typescript files
exports.createPages = require('./lib/createPages')
exports.onCreateNode = require('./lib/onCreateNode')

لا توجد أي كتابة TS لواجهة برمجة تطبيقات عقدة gatsby ، ولكن من السهل جدًا إنشاء بعضها لتغطية مساحة سطح التطبيق الخاص بك وتوفير بعض الأمان. المثال الكامل: https://gist.github.com/clarkdave/53cc050fa58d9a70418f8a76982dd6c8#file -types-ts

متابعة صغيرة لتعليقclarkdave الأكثر إفادة ؛ تقوم ts-node بتحميل tsconfig.json تلقائيًا ، لذلك إذا كان لديك بالفعل واحد في مشروعك ، فلن تحتاج إلى استيراده عند تسجيل ts-node. يجب أن تكون قادرًا فقط على الاتصال بـ require('ts-node').register() .

لذلك ، منذ ما سبق ، كنت أحاول بدء مشروع جديد باستخدام هذا النهج. أواجه الآن مشاكل جديدة. عندما يحاول gatsby-node.js تحميل الملف ، يظهر لي خطأ مثل هذا:

  TSError: ⨯ Unable to compile TypeScript:
  src/util/createPages.ts(6,33): error TS7006: Parameter '_a' implicitly has an 'any' type.
  src/util/createPages.ts(11,50): error TS7006: Parameter 'result' implicitly has an 'any' type.
  src/util/createPages.ts(16,57): error TS7006: Parameter '_a' implicitly has an 'any' type.

سيتم التحديث عندما أجد حلاً ، لكني أردت ترك هذا هنا في حالة تعرض أي شخص آخر لنفس المشكلة وينزع شعره.

لا يحتوي ملف createPages.ts الذي أستخدمه بالتأكيد على أي وظائف بمعامل يسمى _a . أي دوال في الملف تستخدم any قد أعلنت صراحة عن نوع المعامل باستخدام : any . tsc يجمع الملف جيدًا أيضًا ، لذا يبدو أن المشكلة هي ts-node فقط. اعتقدت أن هذا ربما كان مجرد جزء من السلوك العادي لعقد ts-node ، ولكن حتى تغيير مكالمة التسجيل الخاصة بي إلى
require('ts-node').register({files: true}) لم يساعد.

خطأ كامل:

نجاح فتح وتوثيق gatsby-configs - 0.241 ثانية
الإضافات تحميل النجاح - 0.120 ثانية
خطأ ، أرجع gatsby-node.js خطأ

TSError: ⨯ غير قادر على ترجمة TypeScript:
src / util / createPages.ts (6،33): خطأ TS7006: تحتوي المعلمة "_a" ضمنيًا على نوع "أي".
src / util / createPages.ts (11،50): خطأ TS7006: المعلمة "نتيجة" لها ضمنيًا نوع "أي".
src / util / createPages.ts (16،57): خطأ TS7006: تحتوي المعلمة "_a" ضمنيًا على نوع "أي".

• index.ts: 261 خطأ في الإنشاء
  [new-adaptavist-docs] / [ts-node] /src/index.ts:261:12

• index.ts: 367 getOutput
  [new-adaptavist-docs] / [ts-node] /src/index.ts:367:40

• index.ts: 558 Object.compile
  [new-adaptavist-docs] / [ts-node] /src/index.ts:558:11

• index.ts: 439 الوحدة النمطية.m_compile
  [new-adaptavist-docs] / [ts-node] /src/index.ts:439:43

• index.ts: 439 الوحدة النمطية.m_compile
  [new-adaptavist-docs] / [ts-node] /src/index.ts:439:23

• index.ts: 442 تتطلب ملحقات. (وظيفة مجهولة)
  [new-adaptavist-docs] / [ts-node] /src/index.ts:442:12

• index.ts: 442 Object.require.extensions. (وظيفة مجهولة) [as .ts]
  [new-adaptavist-docs] / [ts-node] /src/index.ts:442:12

• v8-compile-cache.js: يتطلب 159
  [new-adaptavist-docs] / [v8-compile-cache] /v8-compile-cache.js:159:20

• gatsby-node.js: 4 كائن.
  /Users/jonny/work/new-adaptavist-docs/gatsby-node.js:4:23

• v8-compile-cache.js: 178 Module._compile
  [new-adaptavist-docs] / [v8-compile-cache] /v8-compile-cache.js:178:30

• v8-compile-cache.js: يتطلب 159
  [new-adaptavist-docs] / [v8-compile-cache] /v8-compile-cache.js:159:20

• api-runner-node.js: 61 تتطلب
  [new-adaptavist-docs] / [gatsby] /src/utils/api-runner-node.js:61:22

نجاح على PreInit - 1.235 ثانية
نجاح حذف ملفات html و css من الإصدارات السابقة - 0.010 ثانية
نجاح تهيئة ذاكرة التخزين المؤقت - 0.007 ثانية
نجاح نسخ ملفات غاتسبي - 0.056 ثانية

يبدو أن المعامل غير المكتوب _a موجود بالفعل في النسخة المترجمة من ملف lib / createNode.ts الخاص بي ؛ بمعنى ، يبدو أن ts-node تحاول تحليل ملف js الناتج من تجميع أولي.

🤦‍♂️ كان الأمر بهذه البساطة: كنت أتصل بـ require('ts-node').register({files: true}) في كلا gatsby-config.js _ و_ gatsby-node.js . هذا يمثل المحاولة الثانية لتجميع ملف تم تجميعه بالفعل.

بمجرد أن جعلت الأمر يتطلب ts-node مرة واحدة في gatsby-config.js ، فقد نجح.

العفو عن البريد العشوائي ... محاولة تحديد المكان الأنسب لترك هذا التعليق. إذا كنت قد قرأت هذا الآن بحثًا عن إجابات للمشكلة المذكورة أعلاه ، فما عليك سوى تخطي هذه الملاحظة!

لقد كنت أتجول مع مظاهر غاتسبي. لقد قمت بإنشاء سمة ، وقمت بتثبيتها في مشروعي عبر الغزل (أي كاعتماد في package.json الخاص بي). استخدم موضوعي الحل أعلاه لسحب ملفات الكتابة المطبوعة إلى gatsby-config.js . بينما يعمل ذلك داخل الريبو الخاص بالسمة ، فإنه يلقي بأخطاء عند محاولة طلب السمة. الخطأ الأولي محير بعض الشيء:

error ENOENT: no such file or directory, scandir 'adaptavist-docs-gatsby-theme'


  Error: ENOENT: no such file or directory, scandir 'my-docs-gatsby-theme'

error UNHANDLED REJECTION


  Error: ENOENT: no such file or directory, scandir 'my-docs-gatsby-theme'

error Command failed with exit code 1.

my-docs-gatsby-theme هو اسم موضوعي المخصص. عند تصحيح الأخطاء في كود gatsby ، وجدت أن المشكلة حدثت عندما كان gatsby يحاول طلب ملف gatsby-config.js الخاص بالسمة. كان الخطأ الأساسي الحقيقي كما يلي:

/path/to/my/project/node_modules/my-docs-gatsby-theme/siteMap.ts:1
(function (exports, require, module, __filename, __dirname) { import {SiteMap} from "./index";
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at NativeCompileCache._moduleCompile (/path/to/my/project/node_modules/v8-compile-cache/v8-compile-cache.js:226:18)
    at Module._compile (/path/to/my/project/node_modules/v8-compile-cache/v8-compile-cache.js:172:36)
    at Module._extensions..js (module.js:663:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/path/to/my/project/node_modules/ts-node/src/index.ts:431:14)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (/path/to/my/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/path/to/my/project/node_modules/my-docs-gatsby-theme/gatsby-config.js:2:19)
    at Module._compile (/path/to/my/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)

كان الملف المطبوع على الحروف الذي كنت أستورده يحتوي على بيان استيراد في الأعلى. هذا جيد بالنسبة للطباعة ، ليس جيدًا بالنسبة لمحمل JS لعقدة الفانيليا. لست متأكدًا من سبب عدم مساعدة تسجيل ts-node في هذه الحالة.

الحل الوحيد الذي يمكنني التفكير فيه هو تجميع ملفات الكتابة المطبوعة الخاصة بي في JS لإعادة التوزيع.

لقد وجدت حلاً مثاليًا (تقريبًا): استخدم gatsby-plugin-typegen لإنشاء أنواع من مخطط GraphQL بحيث يكون هناك:

• تمييز بنية GraphQL ، مع امتداد VSCode GraphQL
• التحقق من GraphQL eslint باستخدام eslint-plugin-graphql
• اكتب تعريفات نتيجة الاستعلام

في كل من تكوينات gatsby-node ومكونات tsx.

مثال: https://github.com/mdluo/blog-gatsby/commit/68eb2693a67fbafc869fd55272d04bc3e96f4021

mdluo أحب الحل الذي توصلت إليه ولكن يبدو أنه ينشئ تعريفات للأنواع فقط عند استخدام الخطاف useStaticQuery بالنسبة لي. أقوم أيضًا بتصدير مخطط الرسم البياني في createPages.ts كما في المثال الخاص بك. هل تمانع في شرح كيف حصلت على هذا العمل؟

تم الحل : حصلت على ملفاتي خارج المجلد src (الذي يقوم البرنامج الإضافي بفحصه).
https://github.com/cometkim/gatsby-plugin-typegen/blob/master/gatsby-node.ts#L19

حل clarkdave رائع. لقد تجاوزت الأمر قليلاً وقمت بتحويل جميع ملفات Gatsby api إلى TypeScript. هناك طرق متعددة لتحقيق ذلك.

تحقق من مدونتي: تحويل تكوين Gatsby و Node API إلى TypeScript

تمكنت من إصلاح المشكلة التي أثارها @ jonnybot0 بخصوص الرمز المميز غير المتوقع في بيان الاستيراد عن طريق الانتقال إلى المكان الذي تم استدعاء ts-node().register فيه.

لقد حصلت على هذا الخطأ كنتيجة للاستيراد إلى gatsby-config عند استدعاء التسجيل في gatsby-node :

(function (exports, require, module, __filename, __dirname) { import { LanguageCode } from "types/localisation"
                                                                       ^
  SyntaxError: Unexpected token {

استدعاء register() في gatsby-config بدلاً من gatsby-node تم إصلاح هذا دون الحاجة إلى إجراء أي تحويل إضافي.

FWIW لقد حققت ذلك عن طريق نقل أي ملفات تكوين Gatsby ، التي أردت كتابتها في TypeScript ، إلى دليلي src (على سبيل المثال ./src/gatsby ). ثم قمت للتو بإنشاء خطوة prebuild لتجميع هذه الملفات باستخدام tsc (مترجم TypeScript). تم استخدام gatsby-plugin-ts بدلاً من gatsby-plugin-typescript لأنه يتحقق من الأنواع الخاصة بك أثناء تجميع مخطط Graphql الخاص بك وإنشاءه تلقائيًا.

يتم تشغيل الخطوة prebuild tsc باستخدام tsconfig.json ( tsconfig.gatsby.json ) ، مثل:

"scripts": {
    "build:gatsby": "tsc --project tsconfig.gatsby.json",
    "prebuild": "yarn clean && yarn build:gatsby",
    "build": "gatsby build",
   ...
}

يتطلب gatsby-plugin-ts بعض تغييرات tsconfig المحددة التي أحتاجها نظرًا لوجود مشكلة في إضافة بعض استعلامات Graphql إلى الكود المترجم. أدناه يمكنك أن ترى ما استخدمته ، والذي أخذته مباشرة من الملف التمهيدي gatsby-plugin-ts

"compilerOptions": {
  "target": "ES2018",    /* or at least ES2015 */
  "module": "ESNext",    /* or at least ES2015 */
  "lib": ["dom"],             /* <-- required! */
  "jsx": "preserve",          /* <-- required! */
  "moduleResolution": "node", /* <-- required! */
  /* other options... */
}

يبدو tsconfig.gatsby.json الخاص بي بالكامل كما يلي:

{
  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": false,
    "target": "es5"
    "module": "commonjs",
    "outDir": ".gatsby",
    "target": "es2017",
    "isolatedModules": false,
    "noEmit": false
  },
  "include": ["src/gatsby/**/*.ts"]
}

إذا رأيت "outDir": ".gatsby" ، فهذا هو المكان الذي يتم فيه تجميع الكود. أضفت هذا الدليل إلى ملفي .gitignore . ما ستلاحظه هو أن الناتج من تشغيل tsc بهذه الطريقة لا يجمع الملفات ، بل يقوم فقط بتحويلها إلى ملف .js بتنسيق CommonJS ، لذلك إذا كنت تشير إلى ملفات أخرى موجودة ' t .ts ، قد تضطر إلى استخدام path.resolve لضمان حصولك على المسار النسبي الصحيح.

هذا مثال على ذلك:

createPage({
  path: `/${node.node_locale.toLowerCase()}/${BLOG_PATH}/${node.slug}`,
  component: nodePath.resolve('./src/templates/Article/Article.tsx'),
  context: {
    id: node.contentful_id,
    locale: node.node_locale,
  },
})

لا يزال Gatsby بحاجة إلى gatsby-config.js ، ولكن كل ما يفعله الآن هو طلب الملف المجمع حديثًا الذي ينشئه tsc :

/**
 * DO NOT EDIT THIS FILE DIRECTLY
 * Edit the source file at `./src/gatsby/gatsby-config.ts`
 */
module.exports = require('./.gatsby/src/gatsby/gatsby-config')

أفعل الشيء نفسه مقابل gatsby-node.js ، ويمكنك رؤية بنية المجلد هنا:

❯ exa -T -L 2
.
├── createPages
│  ├── createContentfulArticlePages.ts
│  ├── createContentfulLegalPages.ts
│  └── createContentfulMarketingPages.ts
├── createPages.ts
├── gatsby-config.ts
├── gatsby-node.ts
├── paths.ts
└── README.md

آمل أن يساعد هذا بعض الناس. اسمحوا لي أن أعرف ما إذا كان يمكن تحسينه.

عملت هذه الفكرة من JohnAlbin بشكل رائع اعتبارًا من إصدار Gatsby الحالي ، وكان من السهل جدًا متابعتها وإعدادها. لم تكن هناك تغييرات مطلوبة في الأوامر build أو develop .

إذا كنت تريد أن أقوم بعمل بداية TypeScript (بما في ذلك خطافات عقدة Gatsby والتكوين):

https://github.com/antoinerousseau/gatsby-starter-antoine