Rollup-plugin-typescript2: Resolva o alias do caminho nos arquivos de declaração (d.ts)

De acordo com as pessoas datilografadas, você está usando ao contrário:

Nossa opinião geral sobre isso é que você deve escrever o caminho de importação que funciona em tempo de execução e definir seus sinalizadores de TS para satisfazer a etapa de resolução do módulo do compilador, em vez de escrever a importação que funciona fora da caixa para TS e, em seguida, tentar para ter alguma outra etapa "consertar" os caminhos para o que funciona em tempo de execução.

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

Atualmente, este plugin não posta o processamento ou mesmo analisa as declarações de tipo, uma vez que são emitidas pelo script.

Pode ser possível fazer algo um pouco melhor do que pesquisar / substituir, mas para resolver isso em geral, vamos basicamente precisar reimplementar o rollup para declarações de tipo (a menos que eles já tenham adicionado a API de serviço de linguagem para gerar declarações agrupadas enquanto eu não estava olhando)

Obrigado pela resposta. Existe um gancho de "pós-emissão" que é executado nos modos de observação e construção que poderia ser usado para anexar uma pesquisa / substituição de etapa de pós-processamento grosseira?

Os arquivos d.ts são emitidos diretamente no pipeline de rollup (quando a opção useTsconfigDeclarationDir: false é usada), portanto, você pode fazer um plug-in de rollup que os transforma.

Eles são emitidos quando o pacote é escrito, então você pode ter que usar generateBundle hook em vez de transform .

Se isso não funcionar. Posso adicionar um gancho de pré-gravação ao próprio rpt2.

Encontre o mesmo problema, encontrei uma solução aqui
atualmente usando ttsc com typescript-transform-paths para gerar arquivos de declaração após o rollup emitidos arquivos ts, meio que redundantes, mas funciona ...

Sim, estou conseguindo isso usando ttsc também. Não consegui fazer com que os transformadores funcionassem diretamente com rollup-plugin-typescript2 transformers options, então optei por usar ttsc

Minha configuração de rollup se parece com:

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

Obrigado cara @alshdavid ! Você salvou minha vida! Ontem tive o mesmo problema e usando typescript-transform-paths resolvi! Obrigado 💪

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

esta solução funcionou para mim no passado, mas estou encontrando muitas situações agora em que recebo um erro como este:

UnhandledPromiseRejectionWarning: TypeError: Não é possível ler a propriedade 'texto' de indefinido

se eu deixar de usar aliases (e esses plug-ins), funcionará sem problemas. Alguém mais tem esse problema?

esta solução funcionou para mim no passado, mas estou encontrando muitas situações agora em que recebo um erro como este:

UnhandledPromiseRejectionWarning: TypeError: Não é possível ler a propriedade 'texto' de indefinido

se eu deixar de usar aliases (e esses plug-ins), funcionará sem problemas. Alguém mais tem esse problema?

Eu tenho o mesmo erro

esta solução funcionou para mim no passado, mas estou encontrando muitas situações agora em que recebo um erro como este:

UnhandledPromiseRejectionWarning: TypeError: Não é possível ler a propriedade 'texto' de indefinido

se eu deixar de usar aliases (e esses plug-ins), funcionará sem problemas. Alguém mais tem esse problema?

Olá, estou apresentando o mesmo problema, mas em um contexto diferente: estou usando o rollup para agrupar uma biblioteca de componentes escrita com Vue e Typescript. Este é o arquivo 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 })
    ]
  }
];

Eu já uso o comando ttsc --emitDeclarationOnly após o rollup --config one, a fim de resolver aliases, mas .vue.d.ts arquivos gerados pelo rollup não são processados ​​(é claro).

O mesmo problema com ttypescript e typescript-transofrm-paths , não funcionou: desapontado. Ao executar o build:

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

Mas usando @zerollup/ts-transform-paths e ttypescript funciona 🎉

Há uma configuração incrível aqui: https://www.npmjs.com/package/@zerollup/ts -transform-path # 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": ["*"]
            }
        ]
    }
}

Excelente! Resolvi de forma diferente, mas não tem relação com esse plugin. Eu removi o caminho de transformação de typescript e ttypescript e deixei o plugin atual como está (typescript ()). Usei tsc-alias após o rollup para resolver o problema. Ele substitui até mesmo arquivos vue porque processa arquivos .d.ts após sua geração.

Usei tsc-alias após o rollup para resolver o problema. Ele substitui até mesmo arquivos vue porque processa arquivos .d.ts após sua geração.

@mantlebee Você se importa de postar um exemplo de sua tsconfig.json , bem como sua configuração de rollup?

Mas usando @zerollup/ts-transform-paths e ttypescript funciona 🎉

@luanorlandi ts-transform-path funciona em tempo de execução? Provavelmente não é uma boa ideia para código de biblioteca.

Usei tsc-alias após o rollup para resolver o problema. Ele substitui até mesmo arquivos vue porque processa arquivos .d.ts após sua geração.

@mantlebee Você se importa de postar um exemplo de sua tsconfig.json , bem como sua configuração de rollup?

Propriedades importantes são declaration , declarationDir e 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"
  ]
}

Arquivo rollup.config.js simples

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

Então eu coloco tudo no comando prepublishOnly (só porque é útil para mim)

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

O TSC-ALIAS fará a substituição dentro da pasta dist/src ; Eu escolhi colocar tudo dentro disso porque ts-alias substituirá aliases pensando estar dentro da pasta src.

Não é uma conclusão ideal, mas funciona. Vou verificar a solução de @luanorlandi o mais

Claro, todas as outras lib devem ser configuradas para evitar a pasta dist/src , como jest

Mas usando @zerollup/ts-transform-paths e ttypescript funciona 🎉

@luanorlandi ts-transform-path funciona em tempo de execução? Provavelmente não é uma boa ideia para código de biblioteca.

Acho que não, o transformador é apenas para a etapa de construção, como a biblioteca o descreve:

_... tsconfig baseUrl + alias de caminhos reescrevendo em pacotes e arquivos de declaração. Todos eles serão reescritos para relativos nos arquivos js transpilados e nos arquivos d.ts._

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