Rollup-plugin-typescript2: حل الاسم المستعار للمسار في ملفات التصريح (d.ts)

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

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

https://github.com/microsoft/TypeScript/issues/15479

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

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

شكرا على الرد. هل هناك خطاف "إرسال المنشور" الذي يعمل على كل من وضعي المشاهدة والبناء والذي يمكن استخدامه لإرفاق بحث خام / استبدال خطوة معالجة ما بعد؟

يتم إرسال ملفات d.ts مباشرة إلى خط الأنابيب التراكمي (عند استخدام الخيار useTsconfigDeclarationDir: false ) ، لذلك يمكنك إنشاء مكون إضافي يقوم بتحويلها.

يتم إصدارها عند كتابة الحزمة ، لذلك قد تضطر إلى استخدام خطاف generateBundle بدلاً من transform .

إذا لم يفلح ذلك. يمكنني إضافة خطاف ما قبل الكتابة إلى rpt2 نفسه.

واجهت نفس المشكلة ، وجدت جولة هنا
حاليًا باستخدام ttsc مع typescript-transform-paths لإنشاء ملفات التصريح بعد تراكم ملفات ts ، نوع من التكرار ولكنه يعمل ...

نعم ، أنا أحقق ذلك باستخدام ttsc أيضًا. لم أتمكن من تشغيل المحولات مباشرة مع خيارات Rollup-plugin-typecript2 transformers ، لذلك اخترت استخدام ttsc

يبدو تكوين مجموعة التحديثات الخاصة بي كما يلي:

import typescript from 'rollup-plugin-typescript2'

export default {
  input: `src/index.ts`,
  preserveModules: true,
  output: {
    format: 'esm',
    dir: './dist'
  },
  external: [],
  watch: {
    include: 'src/**',
  },
  plugins: [
    typescript({ 
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
          ]
        }
      }
    }),
  ],
}

شكرا يا رجل typescript-transform-paths قمت بحلها! شكرا 💪

// webpack.config.js
module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              compiler: 'ttypescript',
            },
          },
          {
            loader: require.resolve('react-docgen-typescript-loader'),
          },
        ],
        exclude: /(node_modules)/,
      },
    ],
  },

// tsconfig.json
compilerOptions: {
  "plugins": [
     { "transform": "typescript-transform-paths" },
     { "transform": "typescript-transform-paths", "afterDeclarations": true }
   ]
}

لقد نجح هذا الحل بالنسبة لي في الماضي ولكني أجد العديد من المواقف الآن حيث أحصل على خطأ مثل هذا:

UnhandledPromiseRejectionWarning: TypeError: لا يمكن قراءة الخاصية 'text' من غير معرف

إذا ابتعدت عن استخدام الأسماء المستعارة (وهذه المكونات الإضافية) ، فستعمل بدون مشكلة. هل يوجد شخص آخر لديه نفس المشكلة؟

لقد نجح هذا الحل بالنسبة لي في الماضي ولكني أجد العديد من المواقف الآن حيث أحصل على خطأ مثل هذا:

UnhandledPromiseRejectionWarning: TypeError: لا يمكن قراءة الخاصية 'text' من غير معرف

إذا ابتعدت عن استخدام الأسماء المستعارة (وهذه المكونات الإضافية) ، فستعمل بدون مشكلة. هل يوجد شخص آخر لديه نفس المشكلة؟

لدي نفس الخطأ

لقد نجح هذا الحل بالنسبة لي في الماضي ولكني أجد العديد من المواقف الآن حيث أحصل على خطأ مثل هذا:

UnhandledPromiseRejectionWarning: TypeError: لا يمكن قراءة الخاصية 'text' من غير معرف

إذا ابتعدت عن استخدام الأسماء المستعارة (وهذه المكونات الإضافية) ، فستعمل بدون مشكلة. هل يوجد شخص آخر لديه نفس المشكلة؟

مرحبًا ، أواجه نفس المشكلة ، ولكن في سياق مختلف: أستخدم Rollup لتجميع مكتبة مكونات مكتوبة باستخدام Vue و Typescript. هذا ملف rollup.config.js :

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import css from "rollup-plugin-css-only";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "./src/index.ts",
    preserveModules: true,
    output: {
      format: "esm",
      dist: "./dist"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "./src/") }
      }),
      css({ output: "dist/bundle.css" }),
      scss(),
      typescript({
        typescript: require("ttypescript"),
        tsconfigDefaults: {
          compilerOptions: {
            plugins: [
              { transform: "typescript-transform-paths" },
              {
                transform: "typescript-transform-paths",
                afterDeclarations: true
              }
            ]
          }
        }
      }),
      vue({ css: false })
    ]
  }
];

أنا أستخدم بالفعل الأمر ttsc --emitDeclarationOnly بعد الأمر rollup --config one ، من أجل حل الأسماء المستعارة ، لكن ملفات .vue.d.ts التي تم إنشاؤها بواسطة التجميع لا تتم معالجتها (بالطبع).

نفس المشكلة مع ttypescript و typescript-transofrm-paths ، لم تنجح: محبط. عند تشغيل البناء:

[!] (plugin rpt2) TypeError: Cannot read property 'text' of undefined

لكن باستخدام @zerollup/ts-transform-paths و ttypescript فهو يعمل 🎉

يوجد إعداد رائع هنا: https://www.npmjs.com/package/@zerollup/ts -transform-paths # setup-for-rollup-plugin-typescript2

_rollup.config.js_

import ttypescript from 'ttypescript'
import tsPlugin from 'rollup-plugin-typescript2'

export default {
    input: 'src/lib.ts',
    output: [{ file : 'dist/lib.js', name : 'mylib', format : 'iife', sourcemap : true }],
    plugins: [
        tsPlugin({
            typescript: ttypescript
        })
    ]
}

_tsconfig.json_

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "my-lib/*": ["src/*"]
        },
        "plugins": [
            {
                "transform": "@zerollup/ts-transform-paths",
                "exclude": ["*"]
            }
        ]
    }
}

رائعة! لقد قمت بحلها بطريقة مختلفة ، لكنها لا تتعلق بهذا المكون الإضافي. لقد أزلت المكوِّن الإضافي الحالي من النوع الذي تم تحويله من نص إلى نص مكتوب و ttypescript والورق كما هو () لقد استخدمت tsc-alias بعد التجميع لحل المشكلة. يستبدل حتى ملفات vue لأنه يعالج ملفات .d.ts بعد إنشائها.

لقد استخدمت tsc-alias بعد التجميع لحل المشكلة. يستبدل حتى ملفات vue لأنه يعالج ملفات .d.ts بعد إنشائها.

mantlebee هل تمانع في نشر مثال على tsconfig.json بالإضافة إلى التهيئة التراكمية الخاصة بك؟

لكن باستخدام @zerollup/ts-transform-paths و ttypescript فإنه يعمل 🎉

luanorlandi لا يعمل ts-transform-path في وقت التشغيل؟ ربما ليست فكرة جيدة لرمز المكتبة.

لقد استخدمت tsc-alias بعد التجميع لحل المشكلة. يستبدل حتى ملفات vue لأنه يعالج ملفات .d.ts بعد إنشائها.

mantlebee هل تمانع في نشر مثال على tsconfig.json بالإضافة إلى التهيئة التراكمية الخاصة بك؟

الخصائص المهمة هي declaration و declarationDir و outDir

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist/src",
    "baseUrl": ".",
    "outDir": "dist/src",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

ملف بسيط rollup.config.js

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "src/index.ts",
    output: {
      format: "esm",
      file: "dist/elegere-ui.js"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "src/") }
      }),
      scss(),
      typescript({
        useTsconfigDeclarationDir: true
      }),
      vue()
      //{ css: false }
    ]
  }
];

ثم أضع كل شيء في الأمر prepublishOnly (لمجرد أنه مفيد بالنسبة لي)

"prepublishOnly": "npm run rollup && tsc-alias && npm run docs"

سيقوم TSC-ALIAS بإجراء الاستبدال داخل المجلد dist/src ؛ اخترت وضع كل شيء بداخله لأن ts-alias سيحل محل الأسماء المستعارة التي تفكر في أن تكون داخل مجلد src.

ليس الاستنتاج الأمثل ، لكنه يعمل. سوف أتحقق من الحل من

بالطبع ، يجب تكوين كل lib آخر لتجنب المجلد dist/src ، مثل jest

لكن باستخدام @zerollup/ts-transform-paths و ttypescript فإنه يعمل 🎉

luanorlandi لا يعمل ts-transform-path في وقت التشغيل؟ ربما ليست فكرة جيدة لرمز المكتبة.

لا أعتقد ذلك ، المحول مخصص فقط لخطوة البناء ، كما تصفها المكتبة:

_... tsconfig baseUrl + إعادة كتابة الاسم المستعار للمسارات في الحزم وملفات التصريح. ستتم إعادة كتابتها جميعًا إلى نسبي في js المنقولة وفي ملفات d.ts.

https://www.npmjs.com/package/@zerollup/ts -transform-paths