Rollup-plugin-typescript2: Selesaikan alias jalur dalam file deklarasi (d.ts)

Menurut orang TypeScript, Anda menggunakannya secara terbalik:

Pandangan umum kami tentang ini adalah Anda harus menulis jalur impor yang berfungsi saat runtime, dan mengatur flag TS Anda untuk memenuhi langkah resolusi modul kompiler, daripada menulis impor yang berfungsi di luar kotak untuk TS dan kemudian mencoba untuk memiliki beberapa langkah lain "memperbaiki" jalur ke apa yang berfungsi saat runtime.

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

Saat ini plugin ini tidak memposting proses atau bahkan mengurai deklarasi tipe setelah dikeluarkan oleh TypeScript.

Dimungkinkan untuk melakukan sesuatu yang sedikit lebih baik daripada mencari/mengganti, tetapi untuk menyelesaikan ini secara umum, pada dasarnya kita perlu mengimplementasikan ulang rollup untuk deklarasi tipe (kecuali mereka telah menambahkan API layanan bahasa untuk menghasilkan deklarasi yang dibundel sementara saya tidak melihat)

Terima kasih balasannya. Apakah ada pengait "post-emit" yang berjalan pada mode arloji dan build yang dapat digunakan untuk melampirkan langkah pencarian/penggantian pemrosesan pasca?

File d.ts dipancarkan langsung ke pipa rollup (ketika opsi useTsconfigDeclarationDir: false digunakan), jadi Anda bisa membuat plugin rollup yang mengubahnya.

Mereka dipancarkan ketika bundel ditulis, jadi Anda mungkin harus menggunakan generateBundle hook alih-alih transform .

Jika itu tidak berhasil. Saya dapat menambahkan kait pra-tulis ke rpt2 itu sendiri.

Menemukan masalah yang sama, temukan jalan-jalan di sini
saat ini menggunakan ttsc dengan typescript-transform-paths untuk menghasilkan file deklarasi setelah rollup mengeluarkan file ts, agak berlebihan tetapi berfungsi ...

Ya, saya mencapai ini menggunakan ttsc juga. Saya tidak dapat membuat transformer bekerja secara langsung dengan opsi rollup-plugin-typescript2 transformers , jadi saya memilih untuk menggunakan ttsc

Konfigurasi rollup saya terlihat seperti:

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

Terima kasih kawan @alshdavid ! Anda telah menyelamatkan hidup saya! Kemarin saya memiliki masalah yang sama dan dengan menggunakan typescript-transform-paths saya menyelesaikannya! Terima kasih

// 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 }
   ]
}

solusi ini telah bekerja untuk saya di masa lalu tetapi saya menemukan banyak situasi sekarang di mana saya mendapatkan kesalahan seperti ini:

UnhandledPromiseRejectionWarning: TypeError: Tidak dapat membaca properti 'teks' yang tidak ditentukan

jika saya beralih dari menggunakan alias (dan plugin ini) maka itu berfungsi tanpa masalah. Adakah orang lain yang memiliki masalah ini?

solusi ini telah bekerja untuk saya di masa lalu tetapi saya menemukan banyak situasi sekarang di mana saya mendapatkan kesalahan seperti ini:

UnhandledPromiseRejectionWarning: TypeError: Tidak dapat membaca properti 'teks' yang tidak ditentukan

jika saya beralih dari menggunakan alias (dan plugin ini) maka itu berfungsi tanpa masalah. Adakah orang lain yang memiliki masalah ini?

saya mempunyai kesalahan yang sama

solusi ini telah bekerja untuk saya di masa lalu tetapi saya menemukan banyak situasi sekarang di mana saya mendapatkan kesalahan seperti ini:

UnhandledPromiseRejectionWarning: TypeError: Tidak dapat membaca properti 'teks' yang tidak ditentukan

jika saya beralih dari menggunakan alias (dan plugin ini) maka itu berfungsi tanpa masalah. Adakah orang lain yang memiliki masalah ini?

Hai, saya mengeluarkan masalah yang sama, tetapi dalam konteks yang berbeda: Saya menggunakan rollup untuk menggabungkan pustaka komponen yang ditulis dengan Vue dan TypeScript. Ini adalah file 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 })
    ]
  }
];

Saya sudah menggunakan perintah ttsc --emitDeclarationOnly setelah perintah rollup --config , untuk menyelesaikan alias, tetapi file .vue.d.ts dihasilkan oleh rollup tidak diproses (tentu saja).

Masalah yang sama dengan ttypescript dan typescript-transofrm-paths , tidak berhasil :kecewa. Saat menjalankan build:

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

Tetapi menggunakan @zerollup/ts-transform-paths dan ttypescript berhasil

Ada pengaturan yang luar biasa di sini: 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": ["*"]
            }
        ]
    }
}

Bagus! Saya menyelesaikannya dengan cara yang berbeda, tetapi tidak terkait dengan plugin ini. Saya menghapus TypeScript-transform-path dan ttypescript dan membiarkan plugin saat ini apa adanya (TypeScript()). Saya menggunakan tsc-alias setelah rollup untuk menyelesaikan masalah. Itu menggantikan bahkan file vue karena memproses file .d.ts setelah generasi mereka.

Saya menggunakan tsc-alias setelah rollup untuk menyelesaikan masalah. Itu menggantikan bahkan file vue karena memproses file .d.ts setelah generasi mereka.

@mantlebee Apakah Anda keberatan memposting contoh tsconfig.json serta konfigurasi rollup Anda?

Tetapi menggunakan @zerollup/ts-transform-paths dan ttypescript berhasil

@luanorlandi tidak ts-transform-path bekerja saat runtime? Mungkin bukan ide bagus untuk kode perpustakaan.

Saya menggunakan tsc-alias setelah rollup untuk menyelesaikan masalah. Itu menggantikan bahkan file vue karena memproses file .d.ts setelah generasi mereka.

@mantlebee Apakah Anda keberatan memposting contoh tsconfig.json serta konfigurasi rollup Anda?

Properti penting adalah declaration , declarationDir dan 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"
  ]
}

File 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 }
    ]
  }
];

Kemudian saya memasukkan semuanya ke dalam perintah prepublishOnly (hanya karena itu berguna bagi saya)

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

TSC-ALIAS akan melakukan penggantian di dalam folder dist/src ; Saya memilih untuk meletakkan semuanya di dalamnya karena ts-alias akan menggantikan alias berpikir untuk berada di dalam folder src.

Bukan kesimpulan yang optimal, tetapi berhasil. Saya akan memeriksa solusinya dari @luanorlandi secepatnya.

Tentu saja, setiap lib lainnya harus dikonfigurasi untuk menghindari folder dist/src , seperti jest

Tetapi menggunakan @zerollup/ts-transform-paths dan ttypescript berhasil

@luanorlandi tidak ts-transform-path bekerja saat runtime? Mungkin bukan ide bagus untuk kode perpustakaan.

Saya rasa tidak, transformator hanya untuk langkah pembuatan, seperti yang dijelaskan oleh perpustakaan:

_...tsconfig baseUrl + paths alias menulis ulang dalam bundel dan file deklarasi. Semuanya akan ditulis ulang ke relatif dalam file js dan d.ts yang ditranspilasikan._

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