Rollup-plugin-typescript2: Pourquoi les déclarations d'interface sont-elles supprimées ?

Créé le 19 juil. 2017  ·  19Commentaires  ·  Source: ezolenko/rollup-plugin-typescript2

Salut,

J'essaie de passer du webpack au rollup pour une bibliothèque et j'ai du mal à faire fonctionner correctement les déclarations.

Il semble que les déclarations d'interfaces ne soient pas exportées, c'est un problème lorsque j'ai des choses comme :

import { RenderedCell } from "../RenderedCell";

export default class MergedCell implements RenderedCell {
    // ...
}

J'obtiens l'erreur que RenderedCell est introuvable.
J'ai travaillé dans webpack et je ne comprends pas quelle est la différence dans ma configuration qui a cassé cela. mais j'ai l'impression de comprendre que c'est normal avec Rollup.

D'AILLEURS. J'utilise le dernier rollup, rollup-plugin-typescript2 et rollup-plugin-uglify Je peux poster mes configurations si besoin

Commentaire le plus utile

Pour ce que ça vaut, j'appelle juste tsc --emitDeclarationOnly après le cumul, ce qui remplace les fichiers de déclaration dans le dossier de construction.
dans mon package.json

"scripts": {
    "build": "rollup -c",
    "postbuild: "tsc --emitDeclarationOnly"
}

Tous les 19 commentaires

Est-ce une erreur d'exécution ou une erreur dactylographiée ? Pourriez-vous poster comment vous exportez l'interface à partir de RenderedCell lui-même ?

Le fait est que le fichier n'est pas du tout généré et qu'il échoue lors de l'utilisation de la bibliothèque dans un autre projet.

Attendez, vous attendez-vous à ce que l'interface RenderedCell soit générée ? D'après le code que vous avez posté, le script dactylographié s'attendrait à ce que le fichier nommé RenderedCell.ts existe un répertoire au-dessus du fichier actuel et il devrait contenir quelque chose comme ceci :

export interface RenderedCell 
{ 
    // ...
}

Pouvez-vous nous donner plus de détails sur la structure de votre projet ? (arborescence de fichiers, tsconfig, rollup config, etc.)

oui je m'attends à ce qu'il soit généré.

Voici mes configurations :

exécuter le build : rollup -c -f es -n sq-web-component-table -o dist/sq-web-component-table.es.min.js

Je n'ai pas mis tout l'arbre car c'est une bibliothèque assez grande et c'est plus du bruit que du signal. Mais vous pouvez déjà voir que de nombreux fichiers ne sont pas générés dans le dist.

rollup.config.ts

import typescript from 'rollup-plugin-typescript2';
import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-es';

export default {
    entry: './src/index.ts',
    dest: 'dist/sq-web-component-table.min.js',
    sourceMap: true,

    plugins: [
        typescript(),
        uglify({}, minify)
    ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "outDir": "dist"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "dist",
    "node_modules",
    "**/*-test.ts"
  ]
}

RenderedCell.ts

import {RenderedElement} from "./RenderedElement";
import {RenderedRow} from "./RenderedRow";
export interface RenderedCell extends RenderedElement {
    isMergedCell(): boolean;
    getColspan(): number;
    setColspan(colspan: number): void;
    getParent(): RenderedRow;
}

Arborescence des fichiers

.
├── src
│   ├── index.ts
│   └── table
│       ├── extensions
│       │   ├── base
│       │   │   ├── FirstTableExtension.ts
│       │   │   ├── LastTableExtension.ts
│       │   │   ├── SectionDispatcher.ts
│       │   │   ├── SectionManager.ts
│       │   │   └── SizeChangeMonitor.ts
│       │   ├── InvalidateEvent.ts
│       │   ├── InvalidateSizesEvent.ts
│       │   ├── RenderedCell.ts
│       │   ├── RenderedElement.ts
│       │   ├── RenderedRow.ts
│       │   ├── RenderedSection.ts
│       │   ├── RenderedTable.ts
│       │   ├── SectionClickedEvent.ts
│       │   ├── support
│       │   │   └── ...
│       │   ├── TableAttributes.ts
│       │   ├── TableExtensionChain.ts
│       │   ├── TableExtensionList.ts
│       │   └── TableExtension.ts
│       ├── model
│       │   └── ...
│       ├── TableRenderingOptions.ts
│       ├── Table.ts
│       ├── util
│       │   └── ...
│       └── view
│           └── ...
├── dist
│   ├── index.d.ts
│   ├── sq-web-component-table.es.min.js
│   ├── sq-web-component-table.es.min.js.map
│   ├── sq-web-component-table.min.js
│   ├── sq-web-component-table.min.js.map
│   └── table
│       ├── extensions
│       │   ├── base
│       │   │   ├── FirstTableExtension.d.ts
│       │   │   ├── LastTableExtension.d.ts
│       │   │   ├── SectionDispatcher.d.ts
│       │   │   ├── SectionManager.d.ts
│       │   │   └── SizeChangeMonitor.d.ts
│       │   ├── InvalidateEvent.d.ts
│       │   ├── InvalidateSizesEvent.d.ts
│       │   ├── RenderedRow.d.ts
│       │   ├── SectionClickedEvent.d.ts
│       │   ├── support
│       │   │   └── ...
│       │   ├── TableAttributes.d.ts
│       │   └── TableExtensionList.d.ts
│       ├── model
│       │   └── ...
│       ├── Table.d.ts
│       ├── util
│       │   └── ...
│       └── view
│           └── ...
├── node_modules
│   └── ...
├── __tests__
│   └── ...
├── package.json
├── rollup.config.js
└── tsconfig.json

Ah, je vois. La lib est-elle opensource par hasard ?

Essayez de créer avec ces options :

typescript({ verbosity: 2, clean: true }),

Vérifiez si tous les fichiers attendus sont en cours de traitement. Si des déclarations commencent soudainement à être générées, il y a un problème de cache quelque part.

Si RenderedCell.ts n'est pas mentionné dans la sortie ( rpt2: transpiling '...' ), augmentez la verbosité à 3 et vérifiez si les fichiers censés l'importer le font. Vous devriez voir quelque chose comme

rpt2: resolving '../RenderedCell'
rpt2:     to '...'

Si le problème n'est pas évident, j'ajouterai plus de journal quelque part.

J'adorerais, peut-être dans le futur :)

Merci pour les astuces, je vais essayer ça lundi.

Si vous définissez declaration: false dans la section compilerOptions de votre tsconfig et recompilez, le problème disparaît-il ? Si oui, l'erreur signalée par TSC est-elle liée à l'un des fichiers du répertoire dist ? Si oui est votre réponse aux deux, l'erreur disparaît-elle si vous introduisez une logique de non-type dans le fichier contenant le fichier RenderedCell , comme l'exportation d'une fonction simple ? Si oui, la raison en est que le fichier contenant RenderedCell est considéré comme inutilisé et Typescript ne préparera jamais de déclarations pour cela.

Si tout cela s'applique à vous, je vois 2 options :

  • Arrêtez de générer des déclarations pour votre bundle.
  • Assurez-vous que le roll-up n'ébranle pas complètement le fichier en introduisant des modifications dans le fichier qui ne sont pas liées au type. Oui, c'est un hack et j'espère que nous trouverons un moyen de faire mieux

Salut,

désolé pour le long délai, j'ai essayé vos trucs et astuces mais je n'ai toujours pas pu obtenir les définitions de type pour les interfaces générées.

J'ai changé la configuration en typescript({ verbosity: 3, clean: true }) .
Dans la sortie du build généré, il n'y a pas une seule mention de l'interface RenderedCell .

Je suis sûr à 100% que ce fichier est nécessaire, car le index.d.ts de la bibliothèque l'exige directement et tous les fichiers sauf les interfaces sont générés, mais les interfaces sont toujours dans les importations du index.d.ts déposer.

Je vais plonger dans le code pour voir s'il y a une raison particulière pour laquelle ces fichiers ne sont pas générés.

@wessberg Arrêter de générer des déclarations pour mon bundle n'est pas une option car il s'agit d'une bibliothèque qui fait partie d'un projet plus vaste entièrement écrit en TypeScript, donc si elle n'a pas de saisie, cela ne fonctionne pas.

J'ai donc fait quelques recherches et créé un référentiel qui reproduit mon cas avec un ensemble minimal de configuration : https://github.com/onigoetz/typescript-rollup-experiment

J'ai également inclus une configuration webpack pour comparer comment webpack le fait fonctionner.

Ma compréhension du problème est que lorsque rollup-plugin-typescript2 nécessite la version compilée d'un fichier (disons index.ts), Typescript renverra les fichiers compilés et ses importations, mais sans les interfaces dans les importations.

C'est pourquoi le rollup ne les génère jamais : il n'a pas connaissance de leur existence.

Pour exécuter le référentiel, effectuez un npm install && npm run build dans le répertoire.

Si vous ajoutez :
import "./SomeInterface"; (exactement comme ça, - sans aucune liaison nommée) à votre fichier index.ts , cela devrait fonctionner. Est-ce que c'est?

Malheureusement, Rollup n'invoque pas le gestionnaire de transformation des plug-ins pour les fichiers de déclaration uniquement, tels que les fichiers contenant uniquement des déclarations de type. La chose ci-dessus devrait fonctionner car cela force Rollup à évaluer le fichier. Ce problème : https://github.com/rollup/rollup-plugin-typescript/issues/28 explique comment et pourquoi ce problème existe. Théoriquement, nous pourrions résoudre manuellement toutes les dépendances de votre application à partir du point d'entrée et déterminer celles qui ne contiennent que des déclarations de type, mais il n'y a aucun moyen de forcer le rollup à invoquer le hook de transformation (à côté d'autres inconvénients évidents tels que la complexité accrue des étapes de construction ).

Je crains que nous ne puissions pas faire grand-chose à ce sujet sans modifier le rollup lui-même. Le "hack" que j'ai décrit devrait fonctionner pour le moment.

Oui, je viens de vérifier, ajouter import "./SomeInterface"; dans le référentiel de test corrige les choses.

Lors de l'importation de types uniquement, les instructions d'importation dactylographiées elides à partir de la sortie js et le cumul ne voient pas ces fichiers et ne les envoie donc pas pour transpilation.

Je vais essayer de tricher et de surveiller les fichiers tapuscrits demandés sur le disque par rapport aux fichiers cumulatifs envoyés pour transpilation. Devrait être possible de forcer la transpilation de la différence avec le seul indicateur de définitions. Cela pourrait entraîner trop de fichiers d.ts dans certains cas, je pense (pour les choses, le cumul a légitimement secoué de l'arbre par exemple)

Merci pour votre recherche, je vais également vérifier si je peux apporter une contribution pour cela.

@onigoetz , ok, essayez votre projet avec master. Vérifiez si les bonnes déclarations sont générées, mais vérifiez également qu'il n'y en a pas d'inattendu :)

Génial, tu l'as littéralement réparé pendant que je dormais :)

Je l'ai testé et ça marche presque bien.

Il y a juste un petit problème, mais je pense que c'est quelque chose contre lequel nous ne pouvons rien faire, le chargeur Webpack fait exactement la même chose et la liste de fichiers est générée par TypeScript lui-même.

Par exemple; Si j'ai trois fichiers dans mon repo :

  • index.ts importation SomeInterface.ts
  • SomeInterface.ts
  • nongenerated.ts importation SomeInterface.ts

nongenerated.ts n'est jamais référencé mais ses types sont quand même générés.

Cool, merci pour le test. Je le publierai un peu plus tard après la confirmation d'un autre problème.

Ouais, on ne peut pas faire grand chose en contournant le rollup. Vous devriez pouvoir exclure ces fichiers manuellement dans l'option exclude , mais c'est une mauvaise solution de contournement.

Ok, en 0.5.1 maintenant

fonctionne bien, il suffit de configurer tsconfig.json

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es5",
        "declaration":true,
        "declarationDir": "lib",
        "typeRoots": [
            "node_modules/@six006",
            "node_modules/@types"
        ],
        "lib": [
            "es2015",
            "es2017",
            "es5"
        ],
    },
    "include": [
        "src/index.ts",
        "src/module/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

include vous indique ce qu'il faut générer

YMMV mais je l'ai fait fonctionner comme ça ...

avant de

export type MyType = { ... };

après

type MyType = { ... };

export { MyType }

Pour ce que ça vaut, j'appelle juste tsc --emitDeclarationOnly après le cumul, ce qui remplace les fichiers de déclaration dans le dossier de construction.
dans mon package.json

"scripts": {
    "build": "rollup -c",
    "postbuild: "tsc --emitDeclarationOnly"
}
Cette page vous a été utile?
0 / 5 - 0 notes